Angular2 relative route navigate in a guard

Question

We have child routes definitions presented here, in which we use a guard to check if the user has accepted terms before using our service.

account/secret/secret.routes.ts:

import { Routes } from '@angular/router';
import { SecretFormComponent } from './secret-form.component';
import { SecretTermsComponent } from './secret-terms.component';
import { TermsGuard } from './services/terms-guard.service';

export const secretRoutes: Routes = [
  {
    path: '',
    redirectTo: 'form'
  },
  {
    path: 'form',
    component: SecretFormComponent,
    canActivate: [TermsGuard]
  },
  { path: 'terms', component: SecretTermsComponent }

  // otherwise redirect to form
  { path: '**',  redirectTo: 'form' }
];

In our terms-guard, we have defined this code:

this.router.navigate(['/account/secret/terms']);
return false;

Is there a way to redirect using relative route navigation from within a "routing group"? Because defining an absolute path may be break if one day our account website dashboard is renamed to anything else like my-account for example. We want our secret module to be reusable.

I'd like to be able to navigate to ['./terms'] in my guard but it doesn't work, just like the guard doesn't know "from where" to start relative navigation.

seangwright · Accepted Answer · 2021-04-28T13:49:02.417

What you want to use is the RouterStateSnapshot parameter of the canActivate method of your guard.

The RouterStateSnapshot has the current path you are in the process of routing to, whereas the Router.url is the current path your are routing from (which is why @Günter Zöchbauer's answer doesn't quite work in this scenario).

For this to apply completely to your use case without additional code you will want to change your routes to

/account/secret/form and /account/secret/form/terms

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

@Injectable()
export class ChildRouteGuard implements CanActivate {
    constructor(private router: Router) { }

    canActivate(_route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        // user can view the specific route
        if (...) {
            return true;
        }

        // else route them to a variation of the route
        this.router.navigate([state.url, 'terms']);

        return false;
    }
}

Edit 1

You could keep your current url structure by also taking advantage of the ActivatedRouteSnapshot as seen below

Assuming routes like account/secret/form and account/secret/terms

route.url is an array of url segments, we want the last one because that is going to be form. We find the index of that in the current route we are trying to go to account/secret/form and slice it out. At this point we have the 'parent' of the current route we are trying to navigate to account/secret and we can add on the sibling to form which is terms.

Note: this pattern breaks down when you have repeated occurrences of form in your url

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

@Injectable()
export class ChildRouteGuard implements CanActivate {
    constructor(private router: Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        // user can view the specific route
        if (...) {
            return true;
        }

        let parentUrl = state.url
            .slice(0, state.url.indexOf(route.url[route.url.length - 1].path));

        this.router.navigate([parentUrl, 'terms']);

        return false;
    }
}

score 2 · Answer 2 · answered Oct 24 '22 at 18:32

I know this is pretty old question but the accepted answer is not correct anymore. I experienced the same problem for years and was waiting for a proper fix. Fortunately Angular team included createUrlTreeFromSnapshot function in one of the latest releases and now it is possible to write nice code:

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {


    if (localStorage.getItem('payed_100000_usd')) {
      return true;
    }

    return createUrlTreeFromSnapshot(route, ['register']);
  }

Here is a small app that uses this function: https://github.com/usarskyy/circulardependency/blob/master/src/app/auth/feature/auth-shell/guards/can-login.guard.ts

Sounds pretty efficient. Thanks! – BlackHoleGalaxy Oct 24 '22 at 23:10 — BlackHoleGalaxy, Oct 24 '22 at 23:10

score 1 · Answer 3 · answered May 02 '17 at 20:48

You should be able to get the url you were attempting to navigate to from the state.url, parse it by using the provided urlSerializer, then splice in the new urlSegment you want relative to what was matched by the guard.

export class TermsGuard implements CanActivate<SecretFormComponent>{
    constructor(private router: Router, private urlSerializer: UrlSerializer) { }
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        let routerStateUrlTree = this.urlSerializer.parse(state.url);
        let newSegment = new UrlSegment('terms', {});
        routerStateUrlTree.root.children.primary.segments.splice(-1, 1, newSegment);
        this.router.navigateByUrl(routerStateUrlTree);
        return false;
    }
}

You said "I'd like to be able to navigate to ['./terms']" but based on your routes I think you meant ['../terms'], but if you did mean ['./terms']just change the second parameter of the splice to a 0 so it doesn't remove the last segment.

score 1 · Answer 4 · answered Mar 03 '19 at 06:53

If you want to do it in a Resolve<T> method you can do it like this.

I think the same should apply for any kind of guard - using pathFromRoot.

This example removes the last 'segment' (that's the -1) and adds "XXXXXXXX".

resolve(route: ActivatedRouteSnapshot) {

   const fullPathFromRoot = route.pathFromRoot.reduce<string[]>((arr, item) => ([...arr, ...item.url.map(segment => segment.path)]), []);
   const newUrl = [ ...fullPathFromRoot.slice(0, -1), "XXXXXXXX" ];

   this.router.navigate(newUrl);
}

route is the route given to you - don't try to inject ActivatedRoute because that won't work.

score 0 · Answer 5 · answered Mar 04 '21 at 10:30

Another way of doing it is by tweaking the url and using navigateByUrl.

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

import { AuthService } from "../services/auth.service.ts";

@Injectable({
  providedIn: "root",
})
export class AuthGuard implements CanActivate {
  constructor(
    private authService: AuthService,
    private router: Router
  ) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): true | Promise<boolean> {
    if (this.authService.isLoggedIn) {
      return true;
    }

    const urlParts = state.url.split("/");
    urlParts[urlParts.length - 1] = "login";
    const newUrl = urlParts.join("/");

    return this.router.navigateByUrl(newUrl);
  }
}

Angular2 relative route navigate in a guard

5 Answers5

Edit 1

Linked