Angular2 routing canActivate and AuthGuard (JWT) with user role parameter

Question

In this exaple project with JWT authentication we se how to allow only authenticated users to some route:

import { RouterConfig } from \'@angular/router\';
i         


        

Answer 1

You can set the data parameter of the route with the role like this

const appRoutes: Routes = [
{ 
  path: 'account/super-secure', 
  component: SuperSecureComponent, 
  canActivate: [RoleGuard], 
  data: { roles: ['super-admin', 'admin'] } 
}];

and then have this in canActivate of RoleGuard:

canActivate(route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {

    let roles = route.data["roles"] as Array;
    return (roles == null || roles.indexOf("the-logged-user-role") != -1);
}

I think this could be another way of doing it instead of creating guard for every role. I would actually take this rout since it requires less code and handles the problem very nicely.