How to manage the roles and permission in angular 2

Question

Hi I have stored the below data

"permission": {
            "1000": "CREATE_DISBMT_WORKFLOW",
            "1001": "EDIT_DISBMT_WORKFLOW",
            "1002": "EDIT_UPLOAD_PHOTO_DISBMT_WORKFLOW",
            "1003": "EDIT_UPLOAD_CONFIRMED_DISBMT_WORKFLOW",
            "1004": "EDIT_VERIFIED_DISBMT_WORKFLOW",
            "1005": "VIEW_DISBMT_WORKFLOW",
            "1006": "DELETE_DISBMT_WORKFLOW"        
        }

in local storage now I want to create a function on which I will pass CREATE_DISBMT_WORKFLOW if it's there in above permission object that it should return true else false

what is the way to do that in angular 2

here my logic is if it returns true data will display using *ngIf etc.

Answer 1

Your permissions service could be as simple as this if you adjust your permissions data object so that the permission names are the keys rather than the permission ids:

import { Injectable } from '@angular/core';

@Injectable()
export class PermissionsService {

  private permissions: any = {}

  constructor() { }

  setPermissions(permissions: any) : void {
    this.permissions = permissions;
  }

  canCurrentUser(permission: string) : boolean {
    return (permission in this.permissions);
  }

}

Configuration:

let permissions = {
    "CREATE_DISBMT_WORKFLOW":"1000",
    "EDIT_DISBMT_WORKFLOW":"1001",
    "EDIT_UPLOAD_PHOTO_DISBMT_WORKFLOW":"1002",
    "EDIT_UPLOAD_CONFIRMED_DISBMT_WORKFLOW":"1003",
    "EDIT_VERIFIED_DISBMT_WORKFLOW":"1004",
    "VIEW_DISBMT_WORKFLOW":"1005",
    "DELETE_DISBMT_WORKFLOW":"1006"
}
this.permissionsService.setPermissions(permissions);

Use:

let hasPermission = this.permissionsService.canCurrentUser("CREATE_DISBMT_WORKFLOW");

But if you need to keep your original permissions data structure, this canCurrentUser(permission) function will also work (though it's less readable):

canCurrentUser(permission: string) {
  for (var key in this.permissions) {
    if (this.permissions.hasOwnProperty(key) && this.permissions[key] === permission) {
        return true;
    }
  }
  return false;
}

Answer 2

For manage permissions and access control for your angular2 applications, you can use ng2-permission module.

Import Ng2Permission into your app's modules:

import { Ng2Permission } from 'angular2-permission';

@NgModule({
  imports: [
    Ng2Permission
  ]
})

You can also manage permissions with PermissionService . see this link: Managing permissions .

import { PermissionService } from 'angular2-permission';
//.
//.
//.
constructor(private _permissionService: PermissionService) { 

this._permissionService.define(['CREATE_DISBMT_WORKFLOW', 
    'EDIT_DISBMT_WORKFLOW', 'EDIT_UPLOAD_PHOTO_DISBMT_WORKFLOW', 
    'EDIT_UPLOAD_CONFIRMED_DISBMT_WORKFLOW', 'EDIT_VERIFIED_DISBMT_WORKFLOW', 
    'VIEW_DISBMT_WORKFLOW', 'DELETE_DISBMT_WORKFLOW']);

}

This module also contains two directive for controlling access in views. For example, the delete button will displayed, if DELETE_DISBMT_WORKFLOW already defined or add in permission store.

<button type="button" class="btn btn-danger btn-xs" [hasPermission]="['DELETE_DISBMT_WORKFLOW']">
  <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
  Delete
</button>

You can use PermissionGuard from Ng2Permission module, protecting routes.

import { PermissionGuard, IPermissionGuardModel } from 'angular2-permission';

const routes: Routes = [
    {
        path: 'users',
        component: UserListComponent,
        canActivate: [PermissionGuard],
        data: {
            Permission: {
                Only: ['GuestUser'],
                RedirectTo: '403'
            } as IPermissionGuardModel
        },
        children: []
    },
//.
//.
//.