javascript - Angular 5 multiple Conditional Routing : "AuthGuards" - Stack Overflow

i am trying to create conditional routing in angular 5 and i have seen this post and the official milestone page of angular: Angular2 conditional routing.

But i didn't find a way to create multiple conditions based on input variables. here is my code :

import { Injectable } from '@angular/core';
import {CanActivate, Router, RouterStateSnapshot, ActivatedRouteSnapshot} from '@angular/router';
import {AuthServiceService} from './auth-service.service';
@Injectable()
export class AuthguardService  implements CanActivate{

    constructor(
        private router: Router,
        private AuthService:AuthServiceService
    ) {}

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        if(this.AuthService.ValidAs("User")!=true){
            this.router.navigate(['pages/login']);
            return false;
        }else{
          return true;
        }
    }

}

My AuthService.ValidAs() method takes an argument to determine the type of user to try and validate as rightful to access a route and returns a boolean. i have three types of users, how do i pass extra arguments to the canActivate property in my routes in order to use that as argument to my ValidAs method.

If there is any other way to create multiple canActivate instances without multiplying files, let me know.

i am trying to create conditional routing in angular 5 and i have seen this post and the official milestone page of angular: Angular2 conditional routing.

But i didn't find a way to create multiple conditions based on input variables. here is my code :

import { Injectable } from '@angular/core';
import {CanActivate, Router, RouterStateSnapshot, ActivatedRouteSnapshot} from '@angular/router';
import {AuthServiceService} from './auth-service.service';
@Injectable()
export class AuthguardService  implements CanActivate{

    constructor(
        private router: Router,
        private AuthService:AuthServiceService
    ) {}

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        if(this.AuthService.ValidAs("User")!=true){
            this.router.navigate(['pages/login']);
            return false;
        }else{
          return true;
        }
    }

}

My AuthService.ValidAs() method takes an argument to determine the type of user to try and validate as rightful to access a route and returns a boolean. i have three types of users, how do i pass extra arguments to the canActivate property in my routes in order to use that as argument to my ValidAs method.

If there is any other way to create multiple canActivate instances without multiplying files, let me know.

• javascript
• angular
• typescript

Share Improve this question Follow asked Apr 20, 2018 at 9:40 Kaki Master Of TimeKaki Master Of Time 1,65933 gold badges2222 silver badges5050 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You can pass a data object to any route like that:

...
{
   path:'dashboard',
   ponent:DashboardComponent,
   canActivate:[
      AuthGuard
   ],
   data:{
      roles: ['ROLE_ADMIN', 'ROLE_EDITOR', 'OTHER_ROLE'],
      // any other relevant data to make your checks
   }
},
...

Then in your AuthGuard you can retrieve the data like:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    ...
    const roles = route.data[ 'roles' ] as Array<string>;

    // Do other checks here
    ...
}

You have two options.

First is to use params or queryParams.

canActivate(
  route: ActivatedRouteSnapshot, 
  state: RouterStateSnapshot): boolean {
  const userType = router.paramMap.get('userType');
}

Second is to use the dependency injection.

constructor(
  private router: Router,
  private AuthService: AuthServiceService,
  @Inject(CURRENT_USER) user: User,
) {}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
  const userType = this.user.type;
}