angular-guards - 在 Angular 4 防护中使用服务

Question

请协助角卫队，我在下面有以下角卫队：

export class RoleGuard implements CanActivate {

 private role: any;
 constructor(private router: Router, private accountService: AccountService) 
 {}

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

     this.accountService.getUserRole().subscribe(res => this.role = res);
     if (this.role === 'admin') {
         return true;
     }
   return false;
 }
}

在服务中：

  getUserRole(): Observable<Response> {
  const options = this.headers();
    return this.http.get(`${environment.ApiUrl}/Roles/getRole`,options)
  .map(res => res.json())
  .catch(res => Observable.throw(res.json()));
 }

我正在尝试订阅该getUserRole()功能，然后将响应分配给this.role但没有发生，角色总是undefined。当我这样做时，我会...subscribe(res => console.log(res))看到响应数据。

Answer 1

在检查是否可以激活该路由之前，您必须等待异步 HTTP 请求的结果。

尝试返回一个新的 Observable：

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

    return new Observable(observer => {   
        //
        this.accountService.getUserRole().subscribe(role => {
            //
            if (role === 'admin') {
                observer.next(true); // Allowing route activation
            } else {
                observer.next(false); // Denying route activation                
            }
        }, err => observer.next(false)); 
    }); 
}