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')

總結

以上是生活随笔為你收集整理的Angular之ngx-permissions的常见使用情况的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。