如何在 Angular 6 的受保护路由上的 canActivate 中返回 Observable<boolean>

Question

我想使用 CanActivate 类来保护路线。我读过的文档总是有 canActivate 方法返回一个布尔值，但我认为我需要返回 Observable 或 Promise。

我的应用有一个数据存储，其属性为user，即Observable<User>。

应用加载时，user.role 为undefined。在初始 http 请求之后，user.role 变为“用户”或“访客”。所以，我需要 canActivate 方法等到 user.role 设置为“user”或“guest”，然后响应。这是我现在拥有的：

  canActivate(): Observable<boolean> {
    return new Observable((observer: Observer<boolean>): void => {
      this.state.user.subscribe((user: User) => {
        if (user.role === 'user') {
          observer.next(true);
        } else if (user.role === 'guest') {
          observer.next(false);
          this.router.navigate(['/login']);
        }
        // user is not set, wait for next value
      });
    });
  }

我认为的问题是订阅一直在进行，当 state.user 更新时，我的路由器有时会意外重定向。我怎样才能解决这个问题。或者，有没有更好的方法来做到这一点？

Answer 1

你能试试这段代码吗

canActivate(): Observable<boolean> {
    return this.state.user.map((user: User) => {
        if (user.role === 'user') {
          return true;
        } else if (user.role === 'guest') {
          this.router.navigate(['/login']);
          return false;
        }
        // user is not set, wait for next value
      });
  }