如何检查具有参数的匹配路由？ （在路线守卫中）

Question

I have a route defined which has a query param called uuid

{path: 'is-protected/:uuid', component: protectedComponent, canActivate: [RouteGuardService]}

In the route guard, i need to check if the url matches and route param (:uuid) is empty or not. If the route does not have the param, i need to redirect it to home route. I am trying using

if (state.url == 'is-protected'){
  if( query param exists){
    return true;
  }
  else {
      this.route.navigate(['/']);
  }
}

This wont work because the state.url does not include the query param so it will never reach in this code block.

Is there a way to check if the route including params exists and navigate accordingly?

Answer 1

Getting the params

You can check the route params importing ActivatedRouter from '@angular/router' in your component or guard.

import { ActivatedRoute } from '@angular/router';

then inject it at contructor and subscribe the params.

constructor( private router: ActivatedRoute ) {
    this.router.params.subscribe( (params: any) => {
      console.log('params.yourParam');
    });
   }

Then you can acces and use the param to check what you need.

Edit:

to use throught canActivate is very similary and you can do like this:

(you can use ActivatedRouteSnapshot too if you dont need an observable)

import { ActivatedRouteSnapshot, CanActivate } from '@angular/router';

in you guard class get the params like this:

 canActivate( router: ActivatedRouteSnapshot ): boolean{

if ( Object.keys(router.params).length > 0 ){ 
    //then you have params

   if ( condition you need to check){
     return true
   } else { 
     return false;
   }

} else { 
     this.route.navigate(['/home']);
}

hope it helps you.

Answer 2

One possible solution I implemented is create a redirection in the router itself without param and redirect it to home.

{ path: 'is-protected', redirectTo: 'home', pathMatch: 'full' }

This will handle if the query param doesnt exist. This method worked for me because I dont have any similar route or the route without param.

Now in the route guard,

if (state.url.indexOf('is-protected') > -1) {
    //this route will have the query param. If it didnt, it would be redirected automatically because of redirection added in list of routes
  if (condition I need to test) {
    return true
  } else {
    this.route.navigate(['/home']);
  }
}

If there is a better approach or solution, please comment. Thanks!

Answer 3

You should inject in your constructor route: ActivatedRouteSnapshot

You can access route parameters like this and compare them with what you expect

let id;

if(route.paramMap.has('id')){
    assessmentId = route.paramMap.get("id");
}

Answer 4

I have only id params in route and for my case I used replace function for url

import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

   canActivateChild(route: ActivatedRouteSnapshot,
                    state: RouterStateSnapshot): Observable<boolean>|Promise<boolean>|boolean {
        const url: string = state.url.replace(/[0-9]/g, ':id');
        // if you have route like '/posts/post/5' this will return '/posts/post/:id'
        // your checking logic
   }