Angular 2 RouterStateSnapshot not returning correct url

Question

I'm trying to get the redirect after login working based on the documentation from angular. https://angular.io/docs/ts/latest/guide/router.html#!#teach-authguard-to-authenticate

I got basically the same setup albeit that some filenames are different.

The problem is that when i log the RouterStateSnapshot url in the authGuard, it wil always output the first route from app-routing.module.ts ('/countries') instead of e.g. /countries/france/34

authGuard

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    let url = state.url;
    console.log(state); // always outputs first route from app-routing.module.ts ('/countries')
    return this.checkLogin(url);
}

checkLogin(url: string): boolean {
    if (this.userService.isLoggedIn()) {
       return true;
    }
    this.userService.redirectUrl = url;
    console.log(this.userService.redirectUrl);

    // not logged in so redirect to login page
    this.router.navigate(['/login']);
    return false;
 }

App routing module

const routes: Routes = [
    { path: '', redirectTo: 'countries', pathMatch: 'full', canActivate: [AuthGuard]},
    { path: 'login', loadChildren: './authentication/authentication.module#AuthenticationModule' },
    { path: 'countries', loadChildren: './countries/countries.module#CountriesModule'},
    ...
];

Country routing module

const routes: Routes = [
    { path: '', component: CountriesComponent, canActivate: [AuthGuard] },
    { path: ':name/:id', component: CountryComponent, canActivate: [AuthGuard] }
];

Hope someone can help

Madhu Ranjan Madhu Ranjan · Accepted Answer · 2017-05-26T13:48:54

you are using same AuthGuard for all the paths, hence you are seeing that result, you can either create different Auth guards for different routes or have some logic to identify when the same canActivate is called.

Hope this helps!!

Angular 2 RouterStateSnapshot not returning correct url

1 Answers