Рецепт аутентификации - PullRequest
Новая
       11

Рецепт аутентификации

1 голос
/ 21 марта 2019

я сталкивался с этим

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

Я ставлю под сомнение использование authService внутри класса AuthState.

Не лучше ли было бы, если бы компонент Login отвечал за аутентификацию с помощью authService, а затем отправлял действие входа в систему (для установки флагов token + auth)?

Если нет, то класс AuthState должен обрабатывать неудачные входы в систему и реагировать с (например) patchState ({loginFailed: true, errorCode: 'WrongPassword'}) ..?

Заранее спасибо!

1 Ответ

0 голосов
/ 02 апреля 2019

Если вы примете шаблон изменения состояния через диспетчеризацию действия и использование сервисов как часть метода действия, нет смысла делать аутентификацию иначе.В текущем приложении, которое я создаю, у меня есть модель: 

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} ));
      }));
  }

форма входа имеет ошибка div, которая показывает разумное сообщение, если responseStatus не является 200-ишным с использованием асинхронного канала, и компонент onSubmit переходит на корневую страницу приложения, если вход в систему работает: 

  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 компонента входа в систему, но я не понимаю, как это было бы преимуществом.

...