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

Question

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

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

Answer 1

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

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

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

这是一种可能的方法：

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

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

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

中

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

   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

以下链接可能有所帮助：

1. Medium Article on Authentication in Angular2 App

2. Steteless Authentication in Angular2 App

Answer 3

还有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 4

您可以使用Ng2Permission模块为角度2.0应用程序提供基于角色和权限的访问控制。