Angular之ngx-permissions的常见使用情况

Angular之ngx-permissions的常见使用情况

权限验证

首先需要请求验证并通过，然后获得权限，最后检查权限。

这种方式需要在Angular 4.3.2 版本以上才会有效工作。

一般来说我们的程序有2个守卫，一个是信息验证，一个是权限守卫，并且一定是先请求信息验证，然后才是权限验证。

例如下面的路由配置：

let routes = [
  { path: '', 
    canActivate: [AuthGuard],
    children: [
      {path: 'component', 
      component: ComponentName, 
      canActivate: [NgxPermissionsGuard],
      data: {
         permissions: {
           only: ['ADMIN', 'MODERATOR'],
           redirectTo: 'another-route'
         }
       }}
    ]
  }
]

守卫过程为，必须先通过 AuthGuard 和 NgxPermissionsGuard 后才能进入下一个路由，上面代码中为当用户为ADMIN或者MODERATOR时才能通过。

注意：确保在身份验证后卫链接的权限请求

canActivate() {
   return authLogin().then((obj) => {
       // or load here if you dont need second request
       // this.permissions.service.loadPermissions(obj.permissions)
      
       return this.authPermissions.getPermissions('url');
   }).then((permissions) => {
       this.permissions.service.loadPermissions(permissions)
   )
}

保存权限

当用户刷新页面的所有数据都将丢失，包括该用户的权限。有很多的保存权限的方式，但是取决于你的业务需求。但最常见的是将它们保存到 localStorage 的。然后从 localStorage 的应用程序启动时加载它们。

例如下面的代码:

login() {
   return authLogin().then((obj) => {
       // Save permissions to localStorage.
       localStorage.setItem('permissions', JSON.stringify(obj.permissions));

       this.permissions.service.loadPermissions(obj.permissions);                
   })
}

禁用元素

通过服务禁用

this.ngxPermissionsConfigurationService.addPermissionStrategy('disable', (templateRef: TemplateRef) => {
     this.renderer2.setAttribute(tF.elementRef.nativeElement.nextSibling, 'disabled', 'true');
      // 下面的也可以，但是不推荐。
     templateRef.elementRef.nativeElement.nextSibling.setAttribute('disabled', true)
});


this.ngxPermissionsConfigurationService.addPermissionStrategy('enable', (templateRef: TemplateRef) => {
     this.renderer2.removeAttribute(tF.elementRef.nativeElement.nextSibling, 'disabled');
});

通过ngxPermissions指令

使用 ngxPermissions指令 配合authorisedStrategy策略。

<button  *ngxPermissionsOnly="'ADMIN'; authorisedStrategy: 'enable'; unauthorisedStrategy: 'disable'">
            <div>Admin will only see this</div>
</button>

也可以通过ngxPermissions指令配合服务来使用：

html

<button  *ngxPermissionsOnly="'ADMIN'">
    <div>This button will be disabled if user has no permissions or role 'admin'</div>
</button>

component

this.ngxPermissionsConfigurationService.setDefaultOnAuthorizedStrategy('enable');

  or

this.ngxPermissionsConfigurationService.setDefaultOnUnauthorizedStrategy('disable')