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. 关于Angular2 App中的身份验证的中文文章

2. Angular2 App中的Steteless身份验证

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