Uncategorized

Role Based Access Control In Angular 4 Route Guards in Depth

June 17, 2018

22019

views

As you all know about JWT authentication and normal auth guards. They will give users permission to sign in and access required route.

Now you want to restrict certain routes or don’t want to give permission to access those routes. Here Role based authentication comes into the picture. We are going to achieve this in a while,

What is Route Guard?

Route guards make the decision by looking for a true or false return value from a class which implements the given guard interface.

There are different kind of route guards. You can modify the behaviour of the route guard based on which route guard you are going to make use of it.

CanActivate
CanActivateChild
CanDeactivate
CanLoad
Resolve

Create a Auth Service

Create a auth.service service which which checks for validity of existing jwt token in the local storage. You can also give different name if you want!

The code looks something like this

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

@Injectable()
export class AuthService {

  constructor() { }
  public isAuthenticated(): boolean {
    const token = localStorage.getItem('jwt');
    if (!token) {
      console.log("Token does not exists");
      return false;
    }
    else {
      console.log("Token exists");
      return true;
    }
  }

}

We are not validating the token here for more security you have to validate the token sending it to the backend, if you get success in return from the backend then return true.

Create a Role Guard Service

Create a role-guard.service service which implements the route guard. You can also give different name if you want! This is what all we wanted to achieve as said in the article title and our major focus is going to be here.

The code looks something like this

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot } from '@angular/router';
import { AuthService } from './auth.service';
import * as decode  from 'jwt-decode';

@Injectable()
export class RoleGuardService implements CanActivate {
  constructor(public auth: AuthService, public router: Router) {}
  canActivate(route: ActivatedRouteSnapshot): boolean {
   
    let expectedRoleArray = route.data;
     expectedRoleArray = expectedRoleArray.expectedRole;
  
    const token = localStorage.getItem('jwt');

    // decode the token to get its payload
    const tokenPayload = decode(token);

    let  expectedRole = '';

    for(let i=0; i<expectedRoleArray.length; i++){
      if(expectedRoleArray[i]==tokenPayload.role){
        console.log("Roles Matched");
        expectedRole = tokenPayload.role;
      }
    }
 
    if (this.auth.isAuthenticated() && tokenPayload.role == expectedRole) {
      console.log("User permitted to access the route");
      return true;
    }
    return false;

    //this.router.navigate(['login']);
  }
}

The service injects AuthService and ActivatedRouteSnapshot rather than router itself, and It has a single method called canActivate. This method is required to implement the CanActivate interface.

The canActivate method returns a boolean indicating whether or not navigation to a route should be allowed or not. If the user isn’t authenticated, then he/she will be redirected to some other place based on where you want them to go. like /login.

You need to use jwt-decode to decode the token and get the payload which contains the role of user which we are going to match with the assigned permissions of all the routes.

Activated route snap shot gives us the permissions array data from routing file or routes(If you are writing routes in separate file). We are going to loop through each permission of a route and at the same time we try to match with the JWT payload role.

If it matches we will give the access to that particular route or else we will redirect userto some other route.