Angular 5 Role Permission and Role Based Access Control
Hi Guys Today Discuss Angular 5 Role Permission and Role based Access Control Typescript Admin Dashboard various roles like guest, user, admin, superadmin page access control based Role Permission How to implement that role permission in Angular 5 typescript let discuss today.
 |
| Angular 5 Role Permission or Access Control |
ngx-permission
First install npm package and then install npm permission package ngx-permission
or
npm install ngx-permissions --save
and then from your angular main module A
ppModule
mport { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import your library
import { NgxPermissionsModule } from 'ngx-permissions';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Specify your library as an import
NgxPermissionsModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
And your app component sharemodule that import in multiple other feature modules, you can export the ngxpermissionsmodule to make sure you don't have to import in every module.
@NgModule({
exports: [
CommonModule,
NgxPermissionsModule
]
})
export class SharedModule { }
and then lazy loaded modules should be add ngxpermission
when you lazy load a module, you should use the for child static method to import the ngxpermissionsmodule.
You can also isolate the services by using
permissionIsolate: true
@NgModule({
imports: [
NgxPermissionsModule.forChild()
]
})
export class LazyLoadedModule { }
@NgModule({
imports: [
NgxPermissionsModule.forChild({
permissionsIsolate: true,
rolesIsolate: true})
]
})
export class LazyIsolatedLoadedModule { }
Once your library is imported, you can use its components, directives and pipes in your Angular application:
Import service to the main application and load permissions
import { Component, OnInit } from '@angular/core';
import { NgxPermissionsService } from 'ngx-permissions';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app';
constructor(private permissionsService: NgxPermissionsService,
private http: HttpClient) {}
ngOnInit(): void {
const perm = ["ADMIN", "EDITOR"];
this.permissionsService.loadPermissions(perm);
this.http.get('url').subscribe((permissions) => {
//const perm = ["ADMIN", "EDITOR"]; example of permissions
this.permissionsService.loadPermissions(permissions);
})
}
}
template view file
<div *ngxPermissionsOnly="['ADMIN', 'GUEST']">
<div>You can see this text congrats</div>
</div>
<ng-template ngxPermissionsOnly="ADMIN">
<div>You can see this text congrats</div>
</ng-template>
<ng-template [ngxPermissionsExcept]="['JOHNY']">
<div> All will see it except JOHNY</div>
</ng-template>
