在 Angular -> 如何检查用户是否具有使用基于角色的访问权限以及保存在数据库中的角色

Question

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

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

来自应用-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 服务找到登录用户的角色，该服务 returns 一个数组，其中包含分配给用户的角色。示例 {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;执行函数 returns false

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

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

Answer 1

你是对的，checkAccess 函数在异步 api 调用完成之前完成，所以总是返回 false。相反，您应该将可观察对象传递给 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 方法返回了一个 observable，守卫将订阅 observable 并等待 true 或 false 结果。

Answer 2

你的问题在于你 return this.hasAccess 而 accessLoginToken 仍然是运行。您可以 return 观察到 angular 守卫。

在 Angular -> 如何检查用户是否具有使用基于角色的访问权限以及保存在数据库中的角色

In Angular -> how to check if the user has permission using role-based access with the role save in the data base

angular

typescript

role-base-authorization

auth-guard

role-based-access-control