javascript - Angular CanLoad 守卫只在第一次延迟加载时触发一次？

Question

我遇到了一种奇怪的行为(或者可能是一种被通缉的行为)。我有一个 Angular 应用程序，其中所有模块都是延迟加载的。

在一个模块上，我有一个守卫检查来自 JWT 的解码用户是否是系统管理员。如果是这样，用户应继续该部分，否则将在仪表板中重定向。

奇怪的是，这个东西只在第一次模块加载时起作用。然后，如果我尝试注销并使用不是系统管理员的用户进行访问，则不会触发 CanLoad 守卫。

我还尝试在同一个守卫中实现(CanActivate 和 CanActivateChild)接口(interface)，并将守卫放在 app-routing.module.ts 和 feature- routing.module.ts 模块，分别在模块的 CanLoad、CanActivate 和 CanActivateChild 属性上。

CanActivate CanActivateChild 方法从不 被调用。 从不。

虽然放置在 app-routing.module.ts 上的 CanLoad 只被调用一次。

这是 is-sys-adm.guard.ts 文件:

export class SFWIsSysAdmGuard implements CanLoad, CanActivate, CanActivateChild {

        public constructor(
            private readonly accessSvc: SFWAuthService,
            private readonly toastSvc: NbToastrService,
            private readonly translateSvc: TranslateService,
            private readonly navigationSvc: NavigationService,
        ) { }


        public canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
            console.log('Can activate child hit');
            return this.canLoad(undefined, undefined);
        }

        public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
            console.log('Can activate hit');
            return this.canLoad(undefined, undefined);
        }

        public canLoad(route: Route, segments: UrlSegment[]): boolean {
            console.log('Can load hit');
            const decodedUser = this.accessSvc.decodedUser;
            if (!!decodedUser && !!decodedUser.isSystemAdmin) {
                return true;
            }

            this.navigationSvc.goToDashboard();
            this.toastSvc.warning(
                this.translateSvc.instant('framework.guards.adm_only.access_denied'),
                this.translateSvc.instant('common.access_to_section_denied_ttl'),
            );
            return false;
        }
    }

这是 app-routing.module.ts 文件:

const routes: Routes = [
        {
            path: '',
            redirectTo: `/${AppRoutes.access}`,
            pathMatch: 'full'
        },
        {
            path: AppRoutes.dashboard,
            loadChildren: () => import('./dashboard/dashboard.module').then(mod => mod.DashboardModule)
        },
        {
            path: AppRoutes.pins,
            loadChildren: () => import('./pins/pins.module').then(mod => mod.PinsModule)
        },
        {
            path: AppRoutes.pinTypes,
            loadChildren: () => import('./pin-types/pin-types.module').then(mod => mod.PinTypesModule)
        },
        {
            path: AppRoutes.organizationPickup,
            loadChildren: () => import('./organization-picker/organization-picker.module').then(mod => mod.OrganizationPickerModule)
        },
        {
            path: AppRoutes.access,
            loadChildren: () => import('./access/access.module').then(mod => mod.AccessModule)
        },
        {
            path: AppRoutes.tourism,
            loadChildren: () => import('./tourism/tourism.module').then(mod => mod.TourismModule)
        },
        {
            path: AppRoutes.security,
            canLoad: [SFWIsSysAdmGuard],
            loadChildren: () => import('./security/security.module').then(mod => mod.SecurityModule)
        },
        {
            path: AppRoutes.notFound,
            loadChildren: () => import('./not-found/not-found.module').then(mod => mod.NotFoundModule)
        },
        {
            path: '**',
            redirectTo: '/404'
        }
    ];

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

最后但同样重要的是:feature-routing.module.ts 文件:

const routes: Routes = [
    {
        path: '',
        canActivate: [SFWIsSysAdmGuard],
        component: SecurityComponent,
        children: [
            {
                path: 'tokens-generator',
                canActivateChild: [SFWIsSysAdmGuard],
                component: TokensGeneratorComponent
            },
        ]
    }
];

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


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

在你问之前，我还尝试将守卫单独放在 CanActivate、CanActivateChild、CanLoad 中以试图阻止任何冲突(如果我理解了文档，就不应该存在。)

我错过了什么吗？这是一种被通缉的行为还是我应该在官方 repo 中打开一个错误？

感谢任何愿意花时间在这个<3

上的人

Answer 1

CanLoad 决定惰性模块是否可以从服务器加载。加载后，将不会再次检查(除非您按 F5)。我猜你需要声明两次，一次是在 CanLoad 中(如果你根本不想加载代码)，一次是在 CanActivate 中，如果你想限制访问权限。

{
  path: AppRoutes.security,
  canLoad: [SFWIsSysAdmGuard],
  canActivate: [SFWIsSysAdmGuard],
  loadChildren: () => import('./security/security.module').then(mod => mod.SecurityModule)
},