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

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

import { Home } from './home';

import { Login } from './login';

import { Signup } from './signup';

import { AuthGuard } from './common/auth.guard';



export const routes: RouterConfig = [

  { path: '',       component:  Login },

  { path: 'login',  component: Login },

  { path: 'signup', component: Signup },

  { path: 'home',   component: Home, canActivate: [AuthGuard] },

  { path: '**',     component: Login },

];

I would like make step further and also indicate what user role have 'access' to route - but I don't know how to pass argument to canActivate AuthGuard (src). So I would like to achieve something like this (for instance I have two roles: Admin and Employee):

  { path: 'home',   component: Home, canActivate: [AuthGuard] },

  { path: 'users',   component: AdminUsers, canActivate: [AuthGuard('Admin')] },

  { path: 'users',   component: Employees, canActivate: [AuthGuard('Employee')] },

Where my AuthGuard could look something like this (where userRole(= Admin or Employee or null) is passed parameter to AuthGuard):

@Injectable()

export class AuthGuard implements CanActivate {

  constructor(private router: Router) {}



  canActivate(userRole) {

    if (!userRole || JWT.user().role == userRole) {

      return true;

    }



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

    return false;

  }

}

where JWT.user.role is helper which read user role stored in JWT token. Is there a way to do something similar like above idea?