Role Based Access Control in Angular2?

Question

I understand the working of JWT based authentication, but I am struggling to understand the correct approach to create a role based access control in angular2.

Can some-one please provide a way to approach this problem, or some useful links.

Solution 1

In the Angular application you can do these things:

1. Make sure that AuthGuard returns false if user is not authorized to access particular component.
2. Hide the menu items that user is not supposed to see.

Remember that real authorization enforced on the server end, in the angular2 you are just dealing with presentation layer.

Here is the one possible approach:

1. You add custom claim to a JWT token. It can be something like this:

   {
     "user" : "JohnDoe",
     "roles" : ["admin","manager","whatever"]
   }
   

2. In the angular app, you create AuthService, where you decode the JWT token and store extracted claim in the variable, and in the localStorage

3. You can create a navigationService which will store the data about menu and roles required to access particular component in the object or array. It can be something like that (pseudocode):

   const menuItems = [
       {
           "name":"Dashboard",
           "routerLink":"/dashboard",
           "rolesRequired":["user"]
       },
       {
           "name":"ControlPanel",
           "routerLink":"/cp",
           "rolesRequired":["admin"]
       },
       .....  
   ]
   
   constructor(private authService:AuthService){}
   
   getMenu(){
       return this.menuItems.filter(
           element => {
             return 
             this.authService.user.role.haveElement(element.rolesRequired)
          }
       )
   }
   

4. In the menu component you can use navigation service to retrive the list of allowed menu items.

5. You can use same navigationService in the AuthGuard.

Solution 2

There is also ngx-permissions library the key difference of this library that it will remove object from DOM instead of hiding it via css. Include it in the project

@NgModule({

 imports: [
   NgxPermissionsModule.forRoot()
 ],

 })
 export class AppModule { }

Define role

NgxRolesService
 .addRole('ROLE_NAME', ['permissionNameA', 'permissionNameB'])

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

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

Use in template

<div *ngxPermissionsOnly="['ADMIN', 'GUEST']">
  <div>You can see this text congrats</div>
</div>

For better documentation see wiki

Solution 3

You can use Ng2Permission module for role and permission based access control for your angular 2.0 applications.

Solution 4

Following link might help:

1. Medium Article on Authentication in Angular2 App

2. Steteless Authentication in Angular2 App

View more solutions

Comments

[vikas etagi]

i found a great article sparkbit.pl/angular-2-route-guards-real-life-example

[RB_]

This have nothing to do with RBAC which is an approach for handling authorization, and which OP is asking about. Authentication is another thing. Down vote from here.

[Heena]

I have implemented role based access for routing but I am facing issues while implementing show/hide menu items depending on the logged in user...can you please checkout this link stackoverflow.com/questions/35543540/…..

[Ali Celebi]

I have started using the ngx-permissions which appears to do the right thing in terms of role and right management implementation.