Angular 6 access control using ngx-permission

Angular 6 access control using ngx-permission:

We can’t see any enterprise applications without access control management as this is the most important feature which all the sites must have to avoid security violations and control the views for different user groups.

In angular this can be easily achieved using ngx-permission, I personally used it in my application developments and did not face any issues so far, and even if you face any issues developer is so active to respond as quick as possible.

1. Install ngx-permission

npm install ngx-permissions --save

 

2. Import into Main Module (app.module)

//Import your library
import { NgxPermissionsModule } from 'ngx-permissions';
import { HttpClientModule } from '@angular/common/http';

Import it:

imports: [
NgxPermissionsModule.forRoot(),HttpClientModule
],

3. Import also into Lazy modules

import { NgxPermissionsModule } from "ngx-permissions";

And import:

imports: [
NgxPermissionsModule.forChild()
],

 

 

4. Import & configuration in your components (Main or sub components)

import { NgxPermissionsService } from "ngx-permissions";
import { HttpClient } from "@angular/common/http";

Constructor:

constructor(private permissionsService: NgxPermissionsService,
private http: HttpClient){

}

NgOnInit:

ngOnInit(): void {
const perm = ["EDITOR"];
this.permissionsService.loadPermissions(perm);
this.http.get('url').subscribe((permissions) => {
this.permissionsService.loadPermissions(perm);
})
}

url is the one which gets the roles from your backend application.

 

 

5. Control the access in your view:

<div class="nested-menu" *ngxPermissionsOnly="['ADMIN']">
<a class="list-group-item" (click)="addExpandClass('banner')"> <span><i
class="fa fa-image"></i>&nbsp;{{ 'Banner' | translate }}</span>
</a>
</div>

If your getting any other issues, have a look at this link.

 

Thanks for reading this article.

661 total views, 3 views today

About Mirthbees 679 Articles
Blogger, Innovator, Developer and Enterpreneur. Founder of GuruRecharge, Readymade online recharge script. Lead Developer in Bookrate.in

Be the first to comment

Leave a Reply

Your email address will not be published.


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.