Angular2 routing canActivate and AuthGuard (JWT) with user role parameter
<p>In this <a href="https://github.com/auth0-blog/angular2-authentication-sample/blob/master/src/app.routes.ts">exaple project</a> with JWT authentication we se how to allow only authenticated users to some route:</p>

<pre><code>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 },
];
</code></pre>

<p>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 <a href="https://github.com/auth0-blog/angular2-authentication-sample/blob/master/src/common/auth.guard.ts">AuthGuard (src)</a>. So I would like to achieve something like this (for instance I have two roles: Admin and Employee):</p>

<pre><code>  { path: 'home',   component: Home, canActivate: [AuthGuard] },
  { path: 'users',   component: AdminUsers, canActivate: [AuthGuard('Admin')] },
  { path: 'users',   component: Employees, canActivate: [AuthGuard('Employee')] },
</code></pre>

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

<pre><code>@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;
  }
}
</code></pre>

<p>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?</p>