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');orthis.ngxPermissionsConfigurationService.setDefaultOnUnauthorizedStrategy('disable')
