Passing parameters to Guard Angular 2

Question

I have an application that I have installed using Guard Authentication Guard to make sure that users cannot access the application if they are not logged in, for example

import { Injectable } from '@angular/core'; import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot, CanActivateChild } from '@angular/router'; import { AuthContext } from './auth-context.service'; @Injectable() export class AuthGuard implements CanActivate { constructor(private router: Router, private authContext: AuthContext) { } canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { // Check to see if a user has a valid JWT if (this.authContext.userInfo !== undefined && this.authContext.userInfo.isAuthenticated) { // If they do, return true and allow the user to load the home component return true; } // If not, they redirect them to the login page this.router.navigate(['/login']); return false; } canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { return this.canActivate(route, state); } } 

I want to add another guard for authorization, which will check whether the user is in a specific role. I am currently hiding the link in navigation based on this role.

  <div *ngIf="userInRole('Admin')"> This is secret stuff </div> 

But if the user knows the route, he can simply connect it to the URL. How can I add the function "userInRole ()" to the Guard? I would need to pass the role name and make a verification code. Do the guards help the parameters?

Answer 1

I found a solution to this

  import { Injectable } from '@angular/core'; import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; import { Observable } from 'rxjs/Observable'; import { AuthService } from './service/auth.service'; @Injectable() export class IsInRoleGuard implements CanActivate { constructor( private _authService: AuthService ) { } async canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean { const userRole = this._authService.getRole(); // Get role from service if (next.data['roles'].indexOf(userRole) !== -1) { return true; } return false; } } 

and in your router config

 import { Routes, RouterModule } from '@angular/router'; import { ModuleWithProviders } from '@angular/core'; import { RootComponent } from './root/root.component'; import { DashboardComponent } from './dashboard/dashboard.component'; import { IsInRoleGuard } from '../../guards/is-in-role.guard'; const routes: Routes = [ { path: '', component: RootComponent, children: [ { path: '', pathMatch: 'full', canActivate: [IsInRoleGuard], component: DashboardComponent, data: { roles: [ 'admin', 'super-admin' ] } } ] } ]; export const RouterConfig: ModuleWithProviders = RouterModule.forChild(routes); 

Answer 2

A guard is simply a class that implements CanActivate or CanDeactivate. But nothing prevents you from entering a service (or value) that will return you the user role. For instance,

 export class AuthGuard implements CanActivate { constructor(private router: Router, private authContext: AuthContext, private user: MyUserService) { } canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { if (!this.user.isAdmin()) return false; ... } }