为什么 Guard 在嵌套路由中不起作用 - Angular 5

Question

我创建了 Guards 以防止访问权限不足的页面。

但我想知道，为什么我必须在每条路线上添加守卫。我认为第一条路线上的警卫应该足够了，因为 children 是延迟加载的 。但事实并非如此。我是不是做错了什么，或者这就是 Angular 的工作原理？

app.routing.ts

export const routes: Routes = [
    { path: "", component: HomeComponent },
    { path: "groups", loadChildren: "app/main/main.module#MainModule",
        canLoad: [AuthCanLoadGuard] } // <-- guard on first route
];

Children:

main.routing.ts

export const routes: Routes = [
    { path: "groups", component: GroupListComponent, canActivate: [AuthGuard] },
    { path: "groups/:id/category", component: CategoryComponent, canActivate: [AuthGuard] },
    {
        path: "groups/:id/category", component: GroupSummaryComponent, children: [
            { path: "bikes", canLoad: [AuthCanLoadGuard], loadChildren: "app/features/bikes/bikes.module#BikesModule" },
            { path: "cars", canLoad: [AuthCanLoadGuard] loadChildren: "app/features/cars/cars.module#CarsModule" },
        ]
    }
];

正如您在 main.routing.ts 中看到的那样，我必须向所有路由添加守卫才能使其正常工作。这是为什么？

编辑：

我已经调试过了，似乎没有进入 MainModule 的 AuthCanLoadGuard。但是对于 BikesModule 和 CarsModule 工作正常。但是不知道为什么...

编辑 2：

问题已解决。问题出在路由配置上。

确保您没有将 MainModule 导入 AppModule（这就是为什么我可以在 main.routing.ts 中的路径中包含 groups 的原因是错误的，因为 parent 已经有 group)
RouterModule.forRoot in Main.Module 应该是 forChild

Answer 1

改用 canActivateChildren。我不太确定 canLoad 有什么用，没用过。

编辑：您的 child 路线看起来也不对。他们不应该用 'groups' 加注星标，因为那部分被夹在 parent 中了。所以在 main.routing { path: "groups", 应该是 { path: "", 等

为什么 Guard 在嵌套路由中不起作用 - Angular 5

Why Guard doesn't work in nested route - Angular 5

angular-routing

angular

angular5