Implement Role Based Access In Angular2

I have an angular2 application and i have implemented the Registration and Login Modules. User role and other details are received when login in. Have no idea on how to properly ma

Solution 1:

I would approach this by building out an object to read from when the user is successfully logged in.

// when user logs in build out permissions object
permissions = {
  dashboardOne: true,
  dashboardTwo: true
}

then within your auth service, have a function that returns a boolean based on the user's permissions

userHasAccess = (() =>{
  return {
    toDashboardOne: () => {
      returnthis.permissions.hasOwnProperty('dashboardOne');
    },
    toDashboardTwo: () => {
      returnthis.permissions.hasOwnProperty('dashboardTwo');
    }
  }
})();

now throughout the app you can call the above function

if(this._authService.userHasAccess.toDashboardOne()){
  // do something
}

I hope this helps get you started. cheers

Solution 2:

You can try to use ngx-permissions library for controlling of permissions and roles in your angular application. The benefits it will remove elements from DOM, lazy loading and isolated modules supported(then, else syntax is supported). Example of loading roles

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']
})
exportclassAppComponentimplementsOnInit {

  title = 'app';

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

  ngOnInit(): void {
    NgxRolesService
    .addRole('ROLE_NAME', ['permissionNameA', 'permissionNameB'])

    NgxRolesService.addRole('Guest', () => {
       returnthis.sessionService.checkSession().toPromise();
    }); 

    NgxRolesService.addRole('Guest', () => {
     returntrue;
    }); 
  }
}

Usage in templates

<ng-template [ngxPermissionsOnly]="['ADMIN']" (permissionsAuthorized)="yourCustomAuthorizedFunction()" (permissionsUnauthorized)="yourCustomAuthorizedFunction()"><div>You can see this text congrats</div></ng-template><div *ngxPermissionsOnly="['ADMIN', 'GUEST']"><div>You can see this text congrats</div></div><div *ngxPermissionsExcept="['ADMIN', 'JOHNY']"><div>All will see it except admin and Johny</div></div>

for more information see wiki page