auth guard - Angular route parameter value is replaced with name of parameter in AuthGuard canLoad

Question

In my AuthGuardService I have the canLoad function, which takes a parameter of type Route. I then assign my authentication redirect url to the path property of that Route parameter.

However, something strange happens, - if the path contains a route parameter, then in the path property that parameter is replaced with the name of the parameter. For example /hello/world/123 becomes /hello/world/:id.

This means that the user is redirected to /hello/world/:id if the authentication is renewed, for example when reloading the page.

How can I solve this?

I am using Angular 8.

This is from the app-routes.ts:

{
    path: 'hello/world/:id',
    loadChildren: () => import('./world/world.module').then(m => m.WorldModule),
    canActivate: [AuthGuardService],
    canActivateChild: [AuthGuardService],
    canLoad: [AuthGuardService],
}

world-routing.module.ts

const routes: Routes = [
    {
        path: '',
        component: WorldComponent
    },
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule],
})
export class WorldRoutingModule {}

world.module.ts

@NgModule({
    declarations: [
        WorldComponent
    ],
    imports: [
        WorldRoutingModule,
        CommonModule,
        TranslateModule.forChild(),
        FormsModule
    ],
    exports: [
        WorldComponent
    ],
    providers: [L10nService],
    entryComponents: [],
})
export class WorldModule {}

From AuthGuardService

canLoad(route: Route) {
    if (this.validateTokenAccess()) {
        return true;
    }

    const url = `/${route.path}`;
    this.authService.redirectTo = url;
    this.authService.handleAuthentication();
    return false;
}

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (this.validateTokenAccess()) {
        return true;
    }

    this.authService.redirectTo = state.url;
    this.authService.handleAuthentication();
    return false;
}

canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.canActivate(route, state);
}

question from:https://stackoverflow.com/questions/65617241/angular-route-parameter-value-is-replaced-with-name-of-parameter-in-authguard-ca

Answer 1

I tried using the second parameter of canLoad instead, of type UrlSegment[], as seen in the code below. It seems to be working. I hope that this will work for all routes in all situations. If anyone knows of any problem this might cause, please let me know.

    canLoad(route: Route, segments: UrlSegment[]) {
        if (this.validateTokenAccess()) {
           return true;
        }

        // const url = `/${route.path}`;
        const url = segments.map(s => s.path).join('/');
    
        this.authService.redirectTo = url;
        this.authService.handleAuthentication();
        return false;
    }