4

I'm currently building on Angular: 7.2.14 and wanted to see if someone could explain how to redirect query parameters either with a route guard, shared service or other means etc.

The problem I'm trying to solve requires query parameters to come in from the root Uri path then redirect the route to the correct child component keeping the query intact when the router changes Uris.

For example, say you had an outside href linked into an angular app (see routes below) and the original route href is: domain.com?foo=bar, since this is the root route of '' angular will then transfer the route over to the matching child route '' this in turn redirects to 'login'. The end result lands you here domain.com/#/login and my query of ?foo=bar is lost.

How do you create a route, route-guard or even a service etc. and maintain the original query but also redirecting you to the final location of domain.com/#/login?foo=bar starting from the root path?

const routes: Routes = [
  {
  path: '', component: AuthorizeComponent,
  children: [
    { path: '', redirectTo: 'login'  },
    { path: 'login', component: LoginComponent, canActivate: [LoginGuardService] },
    { path: 'confirm', component: ConfirmComponent, canActivate: [ConfirmGuardService] },
    { path: 'error', component: ErrorComponent },
  ]
}];

I will try to show my setup here. I do have a LoginGuardService which implements canActivate and within the canActivate function I can redirect keeping the query together by using router.navigate(['/login'], { queryParams: route.queryParams }), except this ONLY works when you link directly to the route like domain.com/#/login?foo=bar not to the root first.

LoginGuardService

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

    if (this.auth.isLoggedIn()) {
      this.router.navigate(['/confirm'], { queryParams: route.queryParams });
   } else {
      return true;
   }

}

ConfirmGuardService

 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

   if (!this.auth.isLoggedIn()) {
     this.router.navigate(['/login'], { queryParams: route.queryParams });
   } else {
     return true;
   }

 }
0

1 Answer 1

4

Set queryParamsHandling: 'preserve' in your navigation extras (Resource):

this.router.navigate(['/confirm'], { queryParamsHandling: 'preserve' });
Sign up to request clarification or add additional context in comments.

3 Comments

I'm not sure how this solves my query parameters from being lost, how are you suggesting I use the router.navigation with my routes outlined above? I'm asking because the issue appears only when you navigate from the AuthorizeComponent route of '' which redirects you to the route 'login'. Thanks.
After more research I found additional information regarding this issue. github.com/angular/angular/issues/12664
I had the exact same requirement in my project and solved this issue by using this workaround. You should use queryParamsHandling: 'preserve' in each router navigation till the landing router. Can you provide a Stackblitz example, so I can look into it better? I think minor changes in routes definition also might help.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.