Angular之ngx-permissions的控制视图访问

案例 demo https://stackblitz.com/edit/ngx-permissions-iwexsb

Permission指令

Permission模块将导出指令 ngxPermissionsOnly 和 ngxPermissionsExcept，它能够根据权限和角色控制元素的显示/隐藏。

指令属性

属性	值	描述
ngxPermissionsOnly	`string \| string[]`	单个或者多个权限允许访问内容
ngxPermissionsExcept	`string \| string[]`	单个或者多个权限拒绝访问内容
(permissionsAuthorized)	`EventEmitter`	权限认证通过时触发
(permissionsUnauthorized)	`EventEmitter`	权限没有认证通过时触发

基础使用

你可以同时使用 ngxPermissionsOnly 和 ngxPermissionsExcept 指令，例如：

 <ng-template [ngxPermissionsOnly]="'ADMIN'"  [ngxPermissionsExcept]="'Manager'">
    <div>You can see this text congrats</div>
 </ng-template>

也可以使用“,” 逗号分割权限，例如：

<ng-template [ngxPermissionsOnly]="['ADMIN', 'GUEST']">
    <div>You can see this text congrats</div>
</ng-template>

then、else语法使用

html

<ng-template ngxPermissionsOnly="ADMIN"
             [ngxPermissionsOnlyThen]="thenBlock"
             [ngxPermissionsOnlyElse]="elseBlock">
    <div>You can see this text congrats</div>
</ng-template>

<ng-template #elseBlock>
   <div>elseBlock</div>
</ng-template>
<ng-template #thenBlock>
   <div>thenBlock</div>
</ng-template>

此处的 ngxPermissionsOnlyThen 和 ngxPermissionsOnlyElse 是配合 ngxPermissionsOnly 指令使用的，当ngxPermissionsOnly权限认证通过的时候，ngxPermissionsOnlyThen讲生效，反之 ngxPermissionsOnlyElse生效，即对应的模板会生效，也就是<div>thenBlock</div> 和 <div>elseBlock</div>。

除此之外还有 ngxPermissionsExceptThen、ngxPermissionsExceptElse。

重点，在同时使用ngxPermissionsExcept 和 ngxPermissionsOnly时，如果要使用 then 和 else 语法，必须要使用 ngxPermissionsThen 和 ngxPermissionsElse。例如：

<ng-template [ngxPermissionsExcept]="'FAIL_BLOCK'" 
    [ngxPermissionsOnly]="'ONLY_BLOCK'"
    [ngxPermissionsElse]="elseBlock"
    [ngxPermissionsThen]="thenBlock">
</ng-template>

<ng-template #elseBlock>
    <div>elseBlock</div>
</ng-template>
<ng-template #thenBlock>
    <div>thenBlock</div>
</ng-template>

也可以使用 “*” 星号

<div *ngxPermissionsOnly="['ADMIN', 'GUEST']">
    <div>You can see this text congrats</div>
</div>

使用“*”代替“[]”，在此时这两种其实是一样的。

在指令中直接使用 then 和 else 语法。

<div *ngxPermissionsOnly="['THEN_BLOCK']; else elseBlock; then thenBlock">main</div>

<ng-template #elseBlock>
    <div>elseBlock</div>
</ng-template>
<ng-template #thenBlock>
    <div>thenBlock</div>
</ng-template>

<div *ngxPermissionsExcept="['THEN_BLOCK']; else elseBlock; then thenBlock"></div>

<ng-template #elseBlock>
   <div>elseBlock</div>
</ng-template>
<ng-template #thenBlock>
   <div>thenBlock</div>
</ng-template>

此处要注意，在使用“*”指令方式的时候，不能够和其他指令在同一个元内使用，否则将会出现错误，正确使用方式如下：

<div *ngxPermissionsOnly="['ADMIN', 'GUEST']" >
  <div *ngIf="true">
    You can see this text congrats 3
  </div>
</div>

自定义行为

默认的permission指令通过remove和show行为策略操作 DOM 元素。permission模块默认导出了这2个策略，甚至允许自定义渲染和装饰行为。内置的行为存储在NgxPermissionsPredefinedStrategies中。

值	行为
remove	从DOM中删除元素
show	添加元素到DOM中

使用方式如下：

<button  *ngxPermissionsOnly="'ADMIN'; authorisedStrategy: 'show'; unauthorisedStrategy: 'remove'">
    <div>Show me</div>
</button>

你也可以使用自定义的策略。例如：

@Component({selector: 'test-comp',
        template: `
        <button  *ngxPermissionsOnly="'ADMIN'; authorisedStrategy: disabledFunc; unauthorisedStrategy: enableFunc">
            <div>123</div>
         </button>`})
class TestComp {
    data: any;

    constructor(private renderer2: Renderer2){}

    public disabledFunc(templateRef: TemplateRef<any>) {
         this.renderer2.setAttribute(tF.elementRef.nativeElement.nextSibling, 'disabled', 'true');
    }

   // sometimes it can loose this reference so its better to write like this
   public disabledFunc = (templateRef: TemplateRef<any>) => {
         this.renderer2.setAttribute(tF.elementRef.nativeElement.nextSibling, 'disabled', 'true');
    }
    public enableFunc = (templateRef: TemplateRef<any>) => {
            this.renderer2.removeAttribute(tF.elementRef.nativeElement.nextSibling, 'disabled');
    }
}

在模板中使用策略时，值是通过引用传递的，不需要加上括号，例如：authorisedStrategy: disabledFunc() ，你只需要写 disabledFunc 即可。

改变默认指令行为

在某些情况下，你可能希望在所有的许可指令来使用不同的行为，而不需要在您的代码添加 authorisedStrategy和unauthorisedStrategy。要做到这一点，你应该使用NgxConfigurationService可用。

它暴露了两个方法setDefaultOnAuthorizedStrategy和setDefaultOnUnauthorizedStrategy参数为一个字符串。你可以随意扩展，并提供自己的方法实现。你能有设置它在 appComponent 或者应用启动前。如果不能找到策将会抛出错误。你也可以隔离 ngxPermissionsConfiguration的子模块。

this.ngxPermissionsConfigurationService.addPermissionStrategy('disable', (templateRef: TemplateRef) => {
     this.renderer2.setAttribute(tF.elementRef.nativeElement.nextSibling, 'disabled', 'true');
      //or directly not recommended
     templateRef.elementRef.nativeElement.nextSibling.setAttribute('disabled', true)
});

this.ngxPermissionsConfigurationService.setDefaultOnAuthorizedStrategy('disable');

or 

this.ngxPermissionsConfigurationService.setDefaultOnUnauthorizedStrategy('disable')

FlyWine

发布了145 篇原创文章 · 获赞 357 · 访问量 44万+

私信关注