Angular 路由参数值替换为 AuthGuard canLoad 中的参数名称

Question

在我的 AuthGuardService 中，我有 canLoad 函数，它采用 Route 类型的参数。然后我将身份验证重定向 url 分配给该路由参数的路径属性。

然而，奇怪的事情发生了，- 如果路径包含路由参数，那么在路径属性中该参数将被替换为参数的名称。例如 /hello/world/123 变成 /hello/world/:id.

这意味着如果更新身份验证，例如在重新加载页面时，用户将被重定向到 /hello/world/:id。

我该如何解决这个问题？

我正在使用 Angular 8.

这是来自应用程序-routes.ts:

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

世界-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 {}

来自 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);
}

Answer 1

我尝试使用 canLoad 的第二个参数，类型为 UrlSegment[]，如下面的代码所示。它似乎在工作。我希望这适用于所有情况下的所有路线。如果有人知道这可能导致的任何问题，请告诉我。

    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;
    }

Angular 路由参数值替换为 AuthGuard canLoad 中的参数名称

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

angular

auth-guard