Question

我碰到了这个

https://ngxs.gitbook.io/ngxs/recipes/authentication

我正在质疑AuthState类中authService的使用。

如果Login组件负责通过authService进行身份验证，然后分派登录操作（以设置令牌+ auth标志），那会更好吗？

如果不是，则AuthState类应该处理失败的登录并做出响应（例如）patchState（{loginFailed：true，errorCode：'WrongPassword'}）..？

谢谢！

Answer 1

如果您采用通过动作分派更改状态并将服务用作动作方法的一部分的模式，则没有理由进行不同的身份验证。在当前正在构建的应用程序中，我具有以下模型：

export interface AuthStateModel {
  user: User | undefined;
  token: JWT | undefined;
  authenticated: boolean;
  responseStatus: number | undefined;
}

的登录操作

export class Login {
  static type = '[auth] Login';
  constructor(public username: string, public password: string) {}
}

及其操作方法

  @Action(Login)
  login(ctx: StateContext<AuthStateModel>, action: Login) {
    //
    // Use the auth service to authenticate the user
    //
    return this.authService.login(action.username, action.password).pipe(
      tap( (ar: AuthResponse) => {
        ctx.patchState({
          user: ar.user,
          token: ar.token,
          authenticated: true,
          responseStatus: undefined});
        }),
      catchError((err: HttpErrorResponse, loginResult: Observable<AuthResponse>) => {
        return of(ctx.patchState( {responseStatus: err.status} ));
      }));
  }

登录表单具有 error div，如果使用异步管道的responseStatus不是200-ish并且组件的onSubmit导航到应用程序的根页面，则该div会显示一条合理的消息作品：

  onSubmit() {
    const username = this.loginFormGroup.value.username;
    const password = this.loginFormGroup.value.password;
    this.manageSubscription(this.store.dispatch(new Login(username, password)).pipe(
      withLatestFrom(this.authState$)).subscribe( ([authStateModel]) => {
        if (authStateModel.auth.authenticated) {
          this.manageSubscription(
            this.store.dispatch(new GetClient(1)).subscribe((_x: void) => {
              this.router.navigate(['/']);
            }));
        }
    }));
  }

很明显，您可以将服务调用重构到登录组件的onSubmit方法内部，但是我看不出这样做会有什么好处。

认证配方

1 个答案: