Angular 5 routing with query string

Question

I am writing my angular 5+ app and using AuthGuardService what I am doing is that I am redirecting from another php application which send me form data in query string

http://localhost:44200/#/users/save?first_name=John&last_name=Doe

the AuthGuardService properly redirect user to login if he is not logged in with following code

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
    if(localStorage.getItem('crmUser')){
      return true;
    }
    this.router.navigate(['/login'], { queryParams: {returnUrl: state.url},queryParamsHandling: 'merge' });
    return false;
}

But after login I can redirect to return url if it has no query string, I want to redirect user to same page with all query string.

Please guide me how to handle it.

You can put condition in your guard itself check that if url has your query string and match with your desired values if not then redirect to sample page. — Kishan
– Kishan, Commented Jul 11, 2018 at 9:36

mrkernelpanic · Accepted Answer · 2018-07-11 09:48:51Z

This is how I did it. In your AuthGuard#canActivate add the following:

@Injectable()
export class AuthGuard implements CanActivate{

  originRoute:ActivatedRouteSnapshot;

  constructor(private authentificationService: AuthChecker,
              private router: Router){}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if(localStorage.getItem('crmUser')){
       return true;
    }
    this.originRoute = route;
    this.router.navigate(['/login'], { queryParams: {returnUrl: state.url},queryParamsHandling: 'merge' });
    return false;


    }
  }

  public hasOriginRoute(): boolean{
    return this.originRoute != null;

  }
}

Now in your LoginComponent when login succeeded add:

if(this.authGuard.hasOriginRoute()){
   this.router.navigate(this.authGuard.originRoute.url.map((x) => x.path));
}

Collectives™ on Stack Overflow

Angular 5 routing with query string

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related