Блог

Я пытаюсь создать «приложение аутентификации» с помощью redux (ngrx), и я пытаюсь использовать свое состояние приложения в секретной охране. Здесь вы можете увидеть мой github: https://github.com/tamasfoldi/ngrx-auth/tree/router Вот как выглядит мой охранник:

 @Injectable()
export class SecretGuard implements CanActivate {
  constructor(private store: Store<AppState>, private router: Router) {
  }
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.store.let(getLoginState())
      .map(state$ => state$.isLoggedIn)
  }
}
  

Он возвращается с атрибутом isLoggedIn, который должен быть в порядке, потому что маршрутизатор разрешает promises и observable, но маршрутизатор блокирует его, когда я перехожу к секретной части. Вот мои маршруты:

 export const appRoutes: Routes = [
  {
    path: '',
    redirectTo: 'auth',
    pathMatch: 'full'
  },
  {
    path: 'auth',
    children: [
      { path: '', redirectTo: 'login', pathMatch: 'full' },
      { path: 'login', component: LoginComponent },
      { path: 'register', component: RegisterComponent }
    ]
  },
  {
    path: 'secret',
    canActivate: [SecretGuard],
    children: [
      { path: '', redirectTo: 'default', pathMatch: 'full' },
      { path: 'default', component: DefaultSecretComponent }
    ]
  }
];
  

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

 @Injectable()
export class SecretGuard implements CanActivate {
  constructor(private store: Store<AppState>, private router: Router) {
  }
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.store.let(getLoginState())
      .skip(1)
      .map(state$ => state$.isLoggedIn)
  }
}
  

Если я использую функцию аутентификации моего AuthService, она работает правильно, но это решение не является «redux-подобным». Можете ли вы помочь мне с этим, как заставить его работать с ngrx? Или я не могу использовать свое состояние приложения в guards?

Вы можете синхронно получать значение из хранилища, не нужно «передавать все» (:

https://github.com/ngrx/store#getstate-getvalue-and-value

 import 'rxjs/add/operator/take';

function getState(store: Store<State>): State {
    let state: State;
    store.take(1).subscribe(s => state = s);
    return state;
}

@Injectable()
export class SecretGuard implements CanActivate {
  constructor(private store: Store<AppState>, private router: Router) { }

  canActivate():boolean {
    return getState(this.store).login.isLoggedIn;
  }
}