Angular 2 如何使 auth guard 与 observable 一起工作

Question

我正在尝试对我的其中一条路线实施身份验证保护，但我无法让它工作，因为我不确定如何使用可观察对象来做到这一点。

我使用 ngrx/store 来存储我的令牌，然后在守卫中我使用 this.store.select('auth') 获取它，它获取一个看起来像这样的对象（如果您已登录）：

{
  token: 'atokenstring',
  isAuthenticated: true,
  isPending: false
}

守卫长这样：

export class AuthGuardService implements CanActivate {

  constructor(private router: Router, private store: Store<IStore>) {}

  canActivate(): Observable<any> {

    return this.store.select('auth').let((state: Observable<IAuthStorage>) => state.filter((auth: IAuthStorage) => !auth.isPending && auth.isAuthenticated)).map(
      (auth: IAuthStorage) => {

        if (!auth.isAuthenticated) {
          return this.router.navigateByUrl('admin/login');
        }
        else {
          return true;
        }
      }
    );
  }
}

现在，问题似乎是守卫 returns 是一个可观察值而不是布尔值。这会导致即使您进入 else which returns true.

也不会呈现路线

我怎样才能使守卫 returns 成为布尔值而不是可观察值？

Answer 1

不确定是否仍然如此，但不久前需要这样的东西

  canActivate(): Observable<any> {

    return this.store.select('auth').let((state: Observable<IAuthStorage>) => state.filter((auth: IAuthStorage) => !auth.isPending && auth.isAuthenticated)).map(
      (auth: IAuthStorage) => {

        if (!auth.isAuthenticated) {
          return this.router.navigateByUrl('admin/login');
        }
        else {
          return true;
        }
      }
    ).first(); // <<<=== added
  }

路由器只等待一个事件，而不是等待 observable 本身完成。

first 需要导入才能使用。

Angular 2 如何使 auth guard 与 observable 一起工作

Angular 2 how to make auth guard work with observable

observable

typescript

angular2-guards

angular