Easy Way Pass Data To CanActivate Guard Angular 4 For Beginner

Short tutorial how to throw data on the canActivate guard API on angular 4. CanActivate is an interface used to check whether a route can be activated or not. Usually used to protect a web page from unauthorized access. And the data thrown on the canActive API is the roles parameter. Okay, follow this simple tutorial.

Another angular tutorial: Tutorial Call Parent Function From Child In Angular 4

You only need to add a “data” property to the angular route interface 4. Read the official route interface documentation here. Properties “data” is additional data provided to the component via ActivatedRoute. For implementation see the following code snippet.

const appRoutes: Routes = [
    {
        path: 'dashboard',]
        component: DashboardComponent, 
        canActivate: [AuthguardService],
        data: {roles: ['superadmin']} 
    }, 
    {
        path: 'laporan-inventaris',
        component: LaporanInventarisComponent,
        canActivate: [AuthguardService],
        data: {roles: ['user']}
    }
.......
.......
]

const appRoutes: Routes = [

{

path: 'dashboard',]

component: DashboardComponent,

canActivate: [AuthguardService],

data: {roles: ['superadmin']}

{

path: 'laporan-inventaris',

component: LaporanInventarisComponent,

canActivate: [AuthguardService],

data: {roles: ['user']}

}

.......

]

Then how to use the above “data” properties in canActivate guard service like the following code snippet.

import { Injectable } from '@angular/core';
import {Router,CanActivate,ActivatedRouteSnapshot,RouterStateSnapshot} from '@angular/router';

@Injectable()
export class AuthguardService  implements CanActivate  {

  constructor(private router:Router) { }
  
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    let roles = route.data["roles"] as Array<string>;
    // console.log('data roles : '+roles[0]);
    // console.log(route);
    if (localStorage.getItem('currentUser')) {
        var currentuser:any;
        currentuser =JSON.parse(localStorage.getItem('currentUser'));
        if(currentuser.level >= roles[0]){
          return true;
        }
    }
    this.router.navigate(['/logout'], { queryParams: { returnUrl: state.url }});
    return false;
  }

}