Angular management authority of the ngx-permissions

Angular management authority of the ngx-permissions

Introduction

Let's start first talk about what is the authority? Authority is refers to the ability of the user unimpeded in the application, so you have to consider your program needs those rights, corresponding to that part.

Note:
Simple protection This library is only available in front-end, back-end is a real role to play, not only to do the validation front, the rear end is more important! ! ! ! Otherwise, your web application can easily be broken.

Defining Permissions

ngx-permissionsAllow to set different logic permissions. To do this you can use NgxPermissionsService, it allows you to freely manipulate them.

Setting a single authority

By NgxPermissionsServicethe addPermissionmethod add.

ngOnInit() {
    // 可以传递单个字符串
    this.permissionsService.addPermission('changeSomething');
    // 也可以传递字符串数组
    this.permissionsService.addPermission(['changeSomething', 'anotherAlso']);
    // 控制某个权限的逻辑，默认是返回true的，你也可以返回false,或者更复杂的逻辑，这取决于你的业务逻辑。
    this.permissionsService.addPermission('changeSomething', () => {
      return true;
    });
}

In html will be available using the

<ng-template ngxPermissionsOnly="changeSomething">
  <div>You can see this text congrats 4</div>
</ng-template>

As can be seen from the code on the addPermissionfunction and loadPermissions no different thing? The answer of course is not, the answer will be back.

this.permissionsService.addPermission('anotherPermissions', (permissionName, permissionsObject) => {
    return !!permissionsObject[permissionName];
});

• permissionNameThe name of the authority, such as the changeSomething , anotherPermissions .

• permissionsObjectA data structure to store all the rights, privileges his name is an internal key, if there is the presence of representatives of this permission. as follows:

  [Image dump the chain fails, the source station may have security chain mechanism, it is recommended to save the picture down uploaded directly (img-XJvowLxw-1581216587096) (https://note.youdao.com/yws/res/69361/WEBRESOURCE10d13a50f0277450dd45e12626419f14)]

Double exclamation mark "!" Is the syntax of javascript, cast boolean data type.

Emphasize it, addPermissionthe second parameter is a callback method, this function must return Validor Invalid, that is, trueor false, it may be Promise.resolve()or Promise.reject().

Set multiple permissions

Define multiple permissions need to use loadPermissions, and this is its addPermissionmajor difference lies.

E.g:

const permissions = ['listMeeting', 'seeMeeting', 'editMeeting', 'deleteMeeting']
NgxPermissionsService.loadPermissions(permissions) 
NgxPermissionsService.loadPermissions(permissions, (permissionName, permissionStore) => {
    return !!permissionStore[permissionName];
}) 

The above code NgxPermissionsServiceis NgxPermissionsServicean object that you need to import the constructor.

Load rights before the program starts

APP_INITIALIZERDefined angular/corein. It is used like this:

import { APP_INITIALIZER } from '@angular/core';

@NgModule({
  providers: [
    DictionaryService,
    {
      provide: APP_INITIALIZER,
      useFactory: (ds: DictionaryService, ps: NgxPermissionsService ) => function() {return ds.load().then((data) => {return ps.loadPermissions(data)})},
      deps: [LoadService, NgxPermissionsService],
      multi: true
    }]
})
export class AppModule { }

Delete permissions

You can NgxPermissionsServicedelete all the rights. E.g:

NgxPermissionsService.flushPermissions();

Usually used when logging out.

Alternatively you can delete individual rights, such as:

NgxPermissionsService.removePermission('user');

Monitoring authority

// 直接过去权限
var permissions = NgxPermissionsService.getPermissions();

// 订阅权限事件
NgxPermissionsService.permissions$.subscribe((permissions) => {
    console.log(permissions)
})

Can NgxPermissionsServiceget all the current permissions, you can also subscribe to the rights object, so that each execution loadPermissions, addPermissionwhen this subscription will trigger the event.