路由卫士未加载组件，并在为true时重定向到/（路由卫士Angular 8）

Question

我正在尝试向我的路由添加防护，有一些路由需要记录，而其他路由则需要记录+成为管理员角色。

因此，我创建了此功能：

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {


    if (this.authService.hasToken()) {
      this.userService.getDataUser().subscribe(Response => {
        if (Response.user.role !== 0) {
          this.router.navigate(['/notAllow']);
          return false;
        } else {
          return true;
        }
      });
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }

因此，如果我的authService检查是否有用户登录，请进入。如果没有，请返回登录。这样很好。如果有登录用户，请检查该角色是否不为0（角色分配给管理员），因此将其重定向到/ notAllow，效果很好。但是，如果角色是0，我知道它在Else里面，但是不加载组件，只需显示一个白页，然后将url更改为/

我一直在读有人解决了添加.first（）的问题，但是我不确定应该在哪里添加它。

任何帮助或提示都会非常感激。

Answer 1

问题是this.userService.getDataUser()是异步的。因此，基本上，您正在等待getDataUser()的回调，但是当它到达subscribe()方法时，该函数已经完成执行。 =>您在return函数内部的subscribe()语句将永远无法工作。

您可以做的是，您可以等待这样的请求：

const res: Response = await this.userService.getDataUser().toPromise();

然后，只需检查角色，您的return语句就可以使用。

而且，您将必须使canActive()方法异步如下：

async canActivate() {
   // ... your logic here
}