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

如果user.role是undefined，为什么要挂起这个可观察的对象？这样，整个路由器就挂起了。这可能会导致意外的行为，例如不需要的重定向。

我认为您不应该挂起此canActivate()方法，而应以异步方式尽快返回true或false。

我不知道问题的背景。如果您想确保用户在运行应用程序之前得到授权，最好使用APP_INITIALIZER？这种机制将“挂起”整个应用程序，直到完成一些重要的事情并解决Promise。

Answer 2

您可以尝试这段代码

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

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

2 个答案: