Блог

У меня есть приложение angular. В этом приложении у меня есть AuthService . Это AuthService позволяет авторизовать одного пользователя с помощью аутентификации firebase.

Мой вопрос заключается в следующем:

Считаете ли вы, что служба несет ответственность за переход на страницу успеха в случае успешной регистрации? Или это должен быть компонент, вызывающий службу?

И если есть ошибка (например, неверный пароль в моем случае), как бы вы вернули эту информацию компоненту, чтобы отобразить ее пользователю?

Мой сервис:

 import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { auth } from 'firebase/app';
import { AngularFireAuth } from '@angular/fire/auth';
import { User } from 'firebase';

@Injectable({
    providedIn: 'root'
})
export class AuthService {
    user: User;
    constructor(public afAuth: AngularFireAuth, public router: Router) {
        this.afAuth.authState.subscribe(user => {
            if (user) {
                this.user = user;
                localStorage.setItem('user', JSON.stringify(this.user));
            } else {
                this.user = null;
                localStorage.setItem('user', null);
            }
        });
    }

    async login(email: string, password: string) {
        let result = await this.afAuth.auth.signInWithEmailAndPassword(
            email,
            password
        );
        this.router.navigate(['...']); 
    }
}
  

Мой компонент:

 import { Component } from '@angular/core';
import { AuthService } from '../auth.service';
import { NgForm } from '@angular/forms';

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
})
export class LoginComponent  {

    constructor(private authService: AuthService) { }

    onSubmit(form: NgForm) {
        this.authService.login(form.value.email, form.value.password);
    }

}
  

Чтобы ответить на ваш вопрос

Считаете ли вы, что служба несет ответственность за переход на страницу успеха в случае успешной регистрации? Или это должен быть компонент, вызывающий службу?

Для соответствующего чистого кода, я думаю, вам нужно обрабатывать логику навигации в сервисе, потому что время от времени ваш компонент будет расти, а вашу кодовую базу очень сложно поддерживать. Или я бы посоветовал вам изучить библиотеку NGRX, у них есть эффект вызова 1 уровня, поэтому вы можете использовать логику побочных эффектов для своего приложения, а класс service выполняет только вызов API.

И если есть ошибка (например, неверный пароль в моем случае), как бы вы вернули эту информацию компоненту, чтобы отобразить ее пользователю?

То же, что и мой вариант выше. И я бы посоветовал вам использовать подход с побочным эффектом, потому что ошибка API также будет обрабатываться внутри класса effect

Ниже приведен пример моего приложения. Когда я получу успешное действие входа в систему, я перенаправлю вход пользователя на страницу портала. Чтобы полностью понять этот шаблон, вы можете взглянуть на эту картинку

Компонент отправляет действие. Действие будет обработано по эффекту, если нам понадобится какой-либо побочный эффект (например, в этом примере перенаправляет пользователя на поратальную страницу, если они успешно вошли в систему). Затем редуктор вычислит новое состояние на основе типа действия и данных, поступающих со стороны компонента или эффекта, а затем обновит пользовательский интерфейс, чтобы отразить изменение.

 @Effect({dispatch: false})
  loginSuccess$ = this
    .actions$
    .pipe(ofType(authAction.LoginActionTypes.LOGIN_SUCCESS), tap(() => this.router.navigate(['/portal'])));
  

Вы можете взглянуть на мой полный образец здесь и на библиотеку NGRX