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';

export class YourComponent {
  constructor(private permissionService: 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.

<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 } from '@angular/core';

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

  // This is an example to show how to override the methods
  getGrantedPolicy$(key: string) {
    return super.getGrantedPolicy$(key);
  }
}
  • Then, in app.module.ts, provide this service as follows:
@NgModule({
  // ...
  providers: [
    // ...
    {
      provide: PermissionService,
      useExisting: CustomPermissionService,
    },
  ],
  // ...
})
export class AppModule {}

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

Contributors


Last updated: July 31, 2024 Edit this page on GitHub

Was this page helpful?

Please make a selection.

To help us improve, please share your reason for the negative feedback in the field below.

Please enter a note.

Thank you for your valuable feedback!

Please note that although we cannot respond to feedback, our team will use your comments to improve the experience.

In this document
Community Talks

Building Modular Monolith Applications Using .NET and ABP Framework

17 Oct, 17:00
Online
Watch the Event
Mastering ABP Framework Book
Mastering ABP Framework

This book will help you gain a complete understanding of the framework and modern web application development techniques.

Learn More