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

现在，问题似乎是守卫返回一个可观察的而不是一个布尔值。即使您进入返回else的{{1}}，也会导致路线无法渲染。

我怎样才能使守卫返回一个布尔值而不是一个可观察的？

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后卫工作

1 个答案: