@lsw-abpvue/permission-management

The permission grant dialog of Lsw.Abp.VueUI, an unofficial Vue UI for the ABP Framework.

Every module that owns something permissions are granted to opens the same dialog: identity opens it for a user and for a role, tenant management for a tenant, and so does anything of your own.

pnpm add @lsw-abpvue/permission-management

<AbpPermissionManagement
  v-model:visible="open"
  provider-name="U"
  :provider-key="user.id"
  :entity-display-name="user.userName"
/>

providerName is what ABP calls the kind of thing being granted to: U for a user, R for a role, T for a tenant. providerKey is which one.

What it does

| | | | --- | --- | | Groups | one tab per permission group, with the number granted in it | | Hierarchy | granting a permission grants its parents, revoking one revokes what is under it | | Inherited | a permission a role grants is checked and disabled — this dialog did not give it and cannot take it away | | Select all | per tab and across all tabs, both three-state | | Filter | matches a group's name and the permissions in it | | Save | sends only what changed, and reloads the application configuration when the change is about the person making it |

The dialog draws through the contract components of @lsw-abpvue/theme-shared and ships no styles of its own: the markup carries abp-permissions__* class names and the theme gives them a look.

The rules on their own

The grant logic is exported as plain functions, so a module with its own permission screen does not have to reimplement it:

import { flatten, toggle, changesBetween } from '@lsw-abpvue/permission-management';

const working = toggle(flatten(result.groups), 'AbpIdentity.Roles.Create');
await service.update('U', id, { permissions: changesBetween(original, working) });

@lsw-abpvue/permission-management/proxy

PermissionsService and its DTOs, generated by abpvue proxy add --module permissionManagement and checked in.

Compared with the Angular UI

@abp/ng.permission-management is the same dialog under the same replaceable component key. What differs:

| Angular | Here | | --- | --- | | The grant rules live in the component | Exported functions, unit tested without a DOM | | Checkboxes are Bootstrap markup | The AbpToggle contract, so a theme decides what a checkbox is | | The dialog is fetched before it is shown | It is shown, with a spinner, and fetches | | The resource permission screen (PermissionManagement.ResourcePermissionsComponent) | Not implemented — it is for a feature the open source modules do not use |

Registered in the design documents' api-parity-map.md.

Licence

MIT.