Foreword

Many times you need to control the permissions of a button. @delon/acl provides an acl directive that allows you to control the permissions of a button, table, list, etc.

Principle

[acl] adds a acl__hide style to the target element by default, and hides the unauthorized element with display: none, which is a simple and efficient way.

The corresponding *aclIf is a structured directive similar to ngIf which does not render the element when it is not authorized. Note: In order to keep it simple, it does not support acl-ability permission point configuration.

DEMO

Role

Displayed when the button must have a user role.

<button [acl]="'user'"></button>
<button *aclIf="'user'"></button>

Displayed when the button must have a user or manage role.

<button [acl]="['user', 'manage']"></button>
<button *aclIf="['user', 'manage']"></button>

Displayed when the button must have a user and manage role.

<button [acl]="{ role: ['user', 'manage'], mode: 'allOf' }"></button>
<button *aclIf="{ role: ['user', 'manage'], mode: 'allOf' }"></button>

Displayed when the input muse have a user role, displayed text when it's not authorized.

<input nz-input *aclIf="'user'; else unauthorized">
<ng-template #unauthorized>{{user}}</ng-template>

Use except reverse control to displayed when it's not authorized.

<ng-template [aclIf]="role" except>
  <input nz-input>
</ng-template>

Permission

Displayed when the button must have a 10 value permisseion.

<button [acl]="10"></button>

In order for the acl instruction to be a role or a permission, so the value of the parameter value is string which mean the role, number which mean the permission. Use the acl-ability parameter if the permission is a string.

<button acl [acl-ability]="'USER-EDIT'"></button>

• oneOf Must be valid against exactly one of the given permission (default).

• allOf Must be valid against all of the given permission

Displayed when the button must have a 10 and USER-EDIT permission.

<button [acl]="{ ability: [10, 'USER-EDIT'], mode: 'allOf' }"></button>

String permission

The check permission is via the can method, and through Global Configuration acl.preCan method, which can be used to implement a string to distinguish roles or permissions.

// global-config.module.ts
const alainConfig: AlainConfig = {
  acl: {
    preCan: (roleOrAbility) => {
      const str = roleOrAbility.toString();
      return str.startsWith('ability.') ? { ability: [ str ] } : null;
    }
  }
};

Therefore, passing a string with the beginning of ability. will be considered a permission point, for example:

<button acl="ability.user.edit"></button>