Angular2中基于角色的访问控制？

Question

我了解基于 JWT 的身份验证的工作原理，但我很难理解在 angular2 中创建基于角色的访问控制的正确方法。

有人可以提供一种方法来解决这个问题，或者一些有用的链接。

Answer 1

在 Angular 应用程序中，您可以执行以下操作：

1. 如果用户未获得授权，请确保 AuthGuard 返回 false 访问特定组件。
2. 隐藏用户所在的菜单项 不应该看到的。

请记住，真正的授权是在服务器端强制执行的，在 angular2 中，您只是在处理表示层。

这是一种可能的方法：

1. 您将自定义声明添加到 JWT 令牌。可以是这样的：

   {
     "user" : "JohnDoe",
     "roles" : ["admin","manager","whatever"]
   }
   

2. 在 Angular 应用程序中，您创建 AuthService，您可以在其中解码 JWT 令牌并将提取的声明存储在变量和 localStorage 中

3. 您可以创建一个导航服务，它将存储有关访问对象或数组中特定组件所需的菜单和角色的数据。可以是这样的（伪代码）：

   const menuItems = [
       {
           "name":"Dashboard",
           "routerLink":"/dashboard",
           "rolesRequired":["user"]
       },
       {
           "name":"ControlPanel",
           "routerLink":"/cp",
           "rolesRequired":["admin"]
       },
       .....  
   ]
   
   constructor(private authService:AuthService){}
   
   getMenu(){
       return this.menuItems.filter(
           element => {
             return 
             this.authService.user.role.haveElement(element.rolesRequired)
          }
       )
   }
   

4. 在菜单组件中，您可以使用导航服务来检索允许的菜单项列表。

5. 您可以在 AuthGuard 中使用相同的 navigationService。

Answer 2

还有ngx-permissions 库，这个库的主要区别在于它将从 DOM 中删除对象，而不是通过 css 隐藏它。 将其包含在项目中

@NgModule({

 imports: [
   NgxPermissionsModule.forRoot()
 ],

 })
 export class AppModule { }

定义角色

NgxRolesService
 .addRole('ROLE_NAME', ['permissionNameA', 'permissionNameB'])

 NgxRolesService.addRole('Guest', () => {
     return this.sessionService.checkSession().toPromise();
  }); 

  NgxRolesService.addRole('Guest', () => {
      return true;
  }); 

在模板中使用

<div *ngxPermissionsOnly="['ADMIN', 'GUEST']">
  <div>You can see this text congrats</div>
</div>

如需更好的文档，请参阅wiki

Answer 3

以下链接可能会有所帮助：

1. Medium Article on Authentication in Angular2 App

2. Steteless Authentication in Angular2 App

Answer 4

您可以使用Ng2Permission 模块对您的 Angular 2.0 应用程序进行基于角色和权限的访问控制。