Angular之ngx-permissions安装入门

权限帮助您对路线的控制权，通过使用简单的概念，你来决定谁可以访问它们。

安装

安装这个第三方库：

npm install ngx-permissions --save

导入

App Module导入

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { NgxPermissionsModule } from 'ngx-permissions';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify your library as an import
     NgxPermissionsModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Shared Module导入

@NgModule({
    exports: [
        CommonModule,
        NgxPermissionsModule
    ]
})
export class SharedModule { }

惰性加载模块

当你延迟加载的模块，你应该使用forChild静态方法导入NgxPermissionsModule。

@NgModule({
    imports: [
        NgxPermissionsModule.forChild()
    ]
})
export class LazyLoadedModule { }

由于惰性加载模块的注射器机制，权限也可以配置为多服务的多个实例。

如下：

@NgModule({
    imports: [
        NgxPermissionsModule.forChild({
        permissionsIsolate: true, 
        configurationIsolate: true,
        rolesIsolate: true})
    ]
})
export class LazyIsolatedLoadedModule { }

在这种情况下，服务是一个完全分离的实例。否则，默认情况下，它会与该服务的其他实例共享其数据。

使用

简单使用

库一旦被导入，你就可以使用他的组件、指令和管道了。

首先在使用的组件内导入服务，然后加载权限设置。

import { Component, OnInit } from '@angular/core';
import { NgxPermissionsService } from 'ngx-permissions';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  title = 'app';

   constructor(private permissionsService: NgxPermissionsService,
               private http: HttpClient) {}

  ngOnInit(): void {
    const perm = ["ADMIN", "EDITOR"];

    this.permissionsService.loadPermissions(perm);
    // 通过http像后端获取对象的权限
     this.http.get('url').subscribe((permissions) => {
       //const perm = ["ADMIN", "EDITOR"]; example of permissions
       this.permissionsService.loadPermissions(permissions);
    })
  }
}

在模板中使用如下:

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

<ng-template ngxPermissionsOnly="ADMIN">
  <div>You can see this text congrats</div>
 </ng-template>
 
 <ng-template [ngxPermissionsExcept]="['JOHNY']">
   <div> All will see it except JOHNY</div>
 </ng-template>

• *ngxPermissionsOnly="['ADMIN', 'GUEST']"代表只有ADMIN和GUEST有权限
• ngxPermissionsOnly="ADMIN"代表只有ADMIN有权限。
• [ngxPermissionsExcept]="['JOHNY']"代表除了JOHNY以外都有权限。