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.

Answer 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.