json

//[doc-seo]
{
    "Description": "Learn how to manage user permissions in ABP Framework with practical examples and methods for effective authorization control."
}

Permission Management

A permission is a simple policy that is granted or prohibited for a particular user, role or client. You can read more about authorization in ABP document.

You can get permission of authenticated user using getGrantedPolicy or getGrantedPolicy$ method of PermissionService.

You can get permission as boolean value:

import { PermissionService } from '@abp/ng.core';
import { inject } from '@angular/core';

export class YourComponent {
  private permissionService = inject(PermissionService);

  ngOnInit(): void {
    const canCreate = this.permissionService.getGrantedPolicy('AbpIdentity.Roles.Create');
  }
}

You may also combine policy keys to fine tune your selection:

// this.permissionService is instance of PermissionService

const hasIdentityAndAccountPermission = this.permissionService.getGrantedPolicy(
  "Abp.Identity && Abp.Account"
);

const hasIdentityOrAccountPermission = this.permissionService.getGrantedPolicy(
  "Abp.Identity || Abp.Account"
);

Please consider the following rules when creating your permission selectors:

Maximum 2 keys can be combined.
&& operator looks for both keys.
|| operator looks for either key.
Empty string '' as key will return true
Using an operator without a second key will return false

Permission Directive

You can use the PermissionDirective to manage visibility of a DOM Element accordingly to user's permission.

html

<div *abpPermission="'AbpIdentity.Roles'">
  This content is only visible if the user has 'AbpIdentity.Roles' permission.
</div>

As shown above you can remove elements from DOM with abpPermission structural directive.

Permission Guard

You can use permissionGuard if you want to control authenticated user's permission to access to the route during navigation.

Import the permissionGuard from @abp/ng.core.
Add canActivate: [permissionGuard] to your route object.
Add requiredPolicy to the data property of your route in your routing module.

import { permissionGuard } from '@abp/ng.core';
// ...
const routes: Routes = [
  {
    path: 'path',
    component: YourComponent,
    canActivate: [permissionGuard],
    data: {
        requiredPolicy: 'YourProjectName.YourComponent', // policy key for your component
    },
  },
];

Customization

In some cases, a custom permission management may be needed. All you need to do is to replace the service with your own. Here is how to achieve this:

First, create a service of your own. Let's call it CustomPermissionService and extend PermissionService from @abp/ng.core as follows:

import { ConfigStateService, PermissionService } from '@abp/ng.core';
import { Injectable, inject } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class CustomPermissionService extends PermissionService {
  constructor() {
    super(inject(ConfigStateService));
  }

  // This is an example to show how to override the methods
  getGrantedPolicy$(key: string) {
    return super.getGrantedPolicy$(key);
  }
}

Then, in app.config.ts, provide this service as follows:

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    {
      provide: PermissionService,
      useExisting: CustomPermissionService,
    },
  ],
};

That's it. Now, when a directive/guard asks for PermissionService from angular, it will inject your service.