Kamil Kiełczewski Kamil Kiełczewski - 3 months ago 250
Javascript Question

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

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: Home, canActivate: [AuthGuard('Admin')] },
{ path: 'users', component: Home, canActivate: [AuthGuard('Employee')] },

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

export class AuthGuard implements CanActivate {
constructor(private router: Router) {}

canActivate(userRole) {
if (!userRole || JWT.user().role == userRole) {
return true;

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?


The signature for CanActivate won't allow you to pass a userRole like you want to. https://github.com/angular/angular/blob/2.0.0-rc.4/modules/%40angular/router/src/interfaces.ts#L54

It's probably best to do separate classes for each of your user role cases. That's the guidance in the official docs too: https://angular.io/docs/ts/latest/api/router/index/CanActivate-interface.html