Question

我有一个棱角分明的应用程序。在此应用程序中，我有一个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);
    }

}

Answer 1

回答您的问题

您认为导航到该服务是服务的责任成功页面是否成功登录？还是应该是组件打电话给服务？

对于干净的代码，我认为您需要处理服务中的导航逻辑，因为您的组件会不时地增长，并且您的代码库很难维护。或者我建议您对NGRX库进行研究，因为它们具有1层调用效果，因此您可以在其中对应用程序执行副作用逻辑，而服务类仅可以调用API。

如果出现错误（例如我的密码无效），怎么办您将此信息返回给组件以显示给用户？

与我上面的选项相同。并建议您选择副作用方法，因为API错误也将在效果类内部处理

以下是我的应用示例。收到成功的登录操作后，我会将用户登录重定向到门户页面。要完全了解这种模式，您可以看一下这张图片

组件将分派动作。如果需要一些副作用，操作将通过效果来处理（例如，在此示例中，如果用户登录成功，则将用户重定向到po页）。然后，Reducer将根据操作类型和来自组件或效果端的数据计算新状态，然后将更新UI来反映更改。

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

您可以查看我的完整示例here和NGRX lib

返回角度误差

1 个答案: