MEAN Stack: Регистрация пользователей в MongoDB

В этом уроке разработаем функционал регистрации пользователей в базе данных. В предыдущем уроке создали форму и научились получать и обрабатывать данные из неё. Теперь создадим отдельный сервис для отправки данных на сервер и регистрации пользователя, включая функцию выхода из аккаунта.

Создание сервиса авторизации и регистрации

В терминале вводим команду:

ng generate service auth

Создаём сервис auth.service. Этот сервис будет использоваться для авторизации, регистрации и выхода пользователя. После создания сервиса, подключим его в app.module.ts:

// ... другие импорты ...
import { AuthService } from './auth.service';

@NgModule({
  // ... другие настройки ...
  providers: [AuthService],
  // ... другие настройки ...
})
export class AppModule { }

Импортируем AuthService и добавляем его в провайдеры. Название класса можно найти в файле созданного сервиса.

Реализация функции регистрации пользователя

В классе AuthService создадим функцию registerUser, которая принимает объект с данными пользователя:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(private http: HttpClient) { }

  registerUser(user: any) {
    const headers = new HttpHeaders({
      'Content-Type': 'application/json'
    });

    return this.http.post('http://localhost:3000/account/reg', user, { headers })
      .pipe(map(response => response));
  }
}

Функция создаёт объект HttpHeaders для указания типа данных (application/json) и отправляет POST-запрос на http://localhost:3000/account/reg с данными пользователя и заголовками. Функция map используется для обработки ответа.

Обработка запроса на сервере (Node.js)

В файле account.js (Express.js) обрабатываем запрос по адресу /account/reg:

// ... другой код ...

router.post('/reg', (req, res) => {
  const newUser = new User(req.body);
  newUser.save()
    .then(() => res.json({ success: true, message: 'Пользователь добавлен' }))
    .catch(() => res.json({ success: false, message: 'Пользователь не добавлен' }));
});

// ... другой код ...

Запрос обрабатывается функцией, которая создаёт новый объект пользователя (User) из данных запроса (req.body) и сохраняет его в базе данных. В зависимости от результата, отправляется JSON-ответ с success: true или success: false.

Вызов функции регистрации в компоненте

В компоненте регистрации (например, reg.component.ts) вызываем функцию registerUser после проверки данных:

import { Component } from '@angular/core';
import { AuthService } from './auth.service';
import { Router } from '@angular/router';

@Component({
  // ...
})
export class RegComponent {
  errorMessage: string | null = null;
  successMessage: string | null = null;
  constructor(private authService: AuthService, private router: Router) { }

  register(user: any) {
    this.authService.registerUser(user).subscribe(data => {
      if (!data.success) {
        this.errorMessage = data.message;
        setTimeout(() => { this.errorMessage = null; }, 2000);
        this.router.navigate(['/reg']);
      } else {
        this.successMessage = data.message;
        setTimeout(() => { this.successMessage = null; }, 2000);
        this.router.navigate(['/auth']);
      }
    });
  }
}

Функция register вызывает registerUser, обрабатывает ответ и перенаправляет пользователя на страницу авторизации или регистрации в зависимости от результата.

Установка и настройка модулей

Для работы с HttpClient необходимо установить модуль:

npm install @angular/common/http

После установки, необходимо импортировать map из rxjs/operators:

import { map } from 'rxjs/operators';

И использовать pipe для вызова map:

return this.http.post('...', user, {headers}).pipe(map(response => response));

Запуск приложения

Перед тестированием необходимо запустить:

Приложение Angular (ng serve)
Сервер Node.js (node server.js или подобная команда)
MongoDB (если используется)

После запуска всех компонентов можно протестировать регистрацию пользователя.

В этом уроке мы интегрировали фронтенд и бэкенд для регистрации пользователей. В следующем уроке реализуем авторизацию и выход из аккаунта.