5

我正在尝试以 Angular 为我的应用程序进行基于角色的访问，我需要一些帮助，因为我是 Angular 的新手......

首先，这是我在确定哪些角色可以访问它的路线中所拥有的......

来自 app-routing.module.ts

{
  path: 'profile',
  component: ComunityComponent,
  canActivate: [AuthGuard],
  data: {
    allowedRoles: ['admin', 'user']
  }
},

其次，我使用 canActivate 函数检查用户是否可以访问路由。来自 auth.guard.ts

private hasAccess: boolean;

constructor(private router: Router, private auth: AuthService) {}

canActivate(next: ActivatedRouteSnapshot,
              state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    const allowedRoles = next.data.allowedRoles;
    if (localStorage.getItem('currentUser')) {
      return this.checkAccess(localStorage.getItem('currentUser'), allowedRoles);
    }

    this.router.navigate(['/login'], {queryParams: {returnUrl: state.url}});
    return false;
  }

第三，我开发了函数 accessLoginToken，它将通过 httpclient.get 服务找到登录用户的角色，该服务返回一个数组，其中包含分配给用户的角色。{success: true, roles:['user']} 来自 auth.service.ts 的示例

 accessLoginToken(token: string) {
    const check = '/users/access';
    const httpOptions = {
      headers: new HttpHeaders({
        'Authorization': 'Bearer ' + token,
      })
    };
    return this.http.get<any>('/api' + check, httpOptions).pipe(
      catchError(err => this.handleError('accessLoginToken', err))
    );
  }

中的第四个function checkAccess，我将它与路由的那些进行比较，如果它们匹配，我允许访问，否则不允许。来自 auth.guard.ts

private checkAccess(token: string, allowedRoles: string[]): boolean {
    this.hasAccess = false;
    this.auth.accessLoginToken(token).subscribe(data => {
      if (data.success) {
        data.roles.forEach(rol => {
          if (allowedRoles.findIndex(rols => rols === rol) >= 0) {
            this.hasAccess = true;
          }
        });
      }
    }, (error) => {
      console.log(error);
    });
    console.log(this.hasAccess);
    return this.hasAccess;
  }

主要问题是我无法让 httpclient 订阅将 hasAccess 变量的值更改为 true 以允许访问。即使this.hasAccess = true; 执行代码，函数也会返回 false

顺便说一句，我不喜欢将角色保存在像 access_token 这样的会话变量中的想法，所以我试图将它保存在数据库中......

任何有关该主题的帮助将不胜感激..谢谢

4

2 回答 2

3

你是对的，checkAccess函数在异步 api 调用完成之前完成，所以false总是返回。相反，您应该将 observable 传递给 canActivate 方法。

private checkAccess(token: string, allowedRoles: string[]): boolean {
    this.hasAccess = false;
    return this.auth.accessLoginToken(token).pipe(
        map(data => {
            if (data.success) {
                data.roles.forEach(rol => {
                    if (allowedRoles.findIndex(rols => rols === rol) >= 0) {
                        this.hasAccess = true;
                    }
                });
            }
            return this.hasAccess;
        })
    )
}

因为方法返回了一个可观察对象canActivate，所以守卫将订阅可观察对象并等待真或假结果。

于 2019-01-12T22:49:58.517 回答
0

您的问题在于您在 accessLoginToken 仍在运行时返回 this.hasAccess 。您可以将 observable 返回到 angular guard。

于 2019-01-12T22:52:28.610 回答