Angular 8 带延迟加载模块的路由，子路由中的子路由可以跳过父路由访问子路由

Question

我尝试使用的应用程序中有以下简单结构：

/
/home
/admin
    /setup
    /other

我有使用模块和延迟加载的路由器。因此，我的应用程序的管理员页面 (/admin) 控制对用于设置应用程序的子页面的访问。最终，Admin 路由 (/admin) 将受到路由保护，但现在我只是构建空模板和一些简单的路由测试。这一切都在起作用。捕获错误地址，丢失地址路由到 /，等等

我的问题是保护我的地址，以便人们无法绕过应用程序的真实路由并访问他们不应该看到的页面。转到 /setup 而不是 /admin/setup。

为了让事情自给自足，我不想在所有子模块上都依赖路由守卫，而只是在一个被守卫的页面下依赖路由。这样，在管理页面下加载的新模块将自动受到保护，以防开发人员忘记添加守卫。此外，各个功能模块都有自己的路由，因此这并不像大多数示例使用的那样位于一个中心位置。

去/admin/setup代码正常工作，/admin/set会去/root。我遇到的问题是 /setup 也转到延迟加载的安装模块，它是 Admin 模块路由的子模块。

编辑：根据建议更新路由模块，但问题仍然存在。

应用-routing.module.ts

const routes: Routes = [
    { path: '', component: DashboardComponent },
    { path: 'home', component: HomeComponent },
    { path: 'admin', loadChildren: () => import('./administrator/administrator.module').then(m => m.AdministratorModule) },

    { path: '**', redirectTo: '/' }     // Wrong route entered, return to main route
];

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

admin-routing.module.ts

const routes: Routes = [
    { path: '', component: AdministratorComponent,
        children: [
            { path: 'setup', loadChildren: () => import('./setup/setup.module').then(m => m.SetupModule) },
            { path: 'zzz', loadChildren: () => import('./zzz/zzz.module').then(m => m.zzzModule) }
        ]
    }
];

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

编辑 #2：在 admin.module.ts 中添加管理员路由的示例导入。

admin.module.ts

@NgModule({
    declarations: [AdministratorComponent],
    imports: [
        CommonModule,
        MaterialModule,
        SetupModule,
        zzzModule,
        AdministratorRoutingModule
    ]
})
export class AdministratorModule { }

问题是我可以正常进入/admin/setup。但是，您也可以通过简单地转到 /setup 来访问此页面。我不希望有人能够绕过路由并访问受限制的页面。

我不确定如何防止此路由 (/setup) 工作。

Answer 1

你好，我不确定我是否理解你的问题，我也不理解你的管理路由。

如果我看了你的路线，我希望你有这条路线：

/
/家
/admin/admin（因为你有父级管理员和子级管理员）
/admin/setup
/admin/zzz

但是我不明白你的路由前的'./'。这可能是问题所在。

你试过类似的东西吗？（如果您的 AdministratorComponent 也有一个路由器出口，这也是有效的）

admin-routing.module.ts

const routes: Routes = [
    {
        path: '',
        component: AdministratorComponent,
        children: [
            { path: 'setup', loadChildren: () => import('./setup/setup.module').then(m => m.SetupModule) }
            { path: 'zzz', loadChildren: () => import('./zzz/zzz.module').then(m => m.zzzModule) }
        ]
    }
];

admin.module.ts

@NgModule({
    declarations: [AdministratorComponent],
    imports: [
        CommonModule,
        MaterialModule
        AdministratorRoutingModule
    ]
})
export class AdministratorModule { }

如果你在这里导入模块，你会注意到使用延迟加载，你会在当前模块中添加路由。

Answer 2

这就是我的做法

const routes: Routes = [
    { path: '', component: AdministratorComponent },
    { path: 'setup', loadChildren: () => import('./setup/setup.module').then(m => m.SetupModule) }
    { path: 'zzz', loadChildren: () => import('./zzz/zzz.module').then(m => m.zzzModule) }
];

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

这不会让用户导航到仅：/setup。只有 admin/setup 会存在。不再 /admin/admin

并且在惰性加载模块 setup.module 和 zzz.module 中。对那里的任何路线进行相同的更改

Angular 8 带延迟加载模块的路由，子路由中的子路由可以跳过父路由访问子路由

Angular 8 Routing w/ Lazy Loading modules, child within a child route can skip parent route to access child

routing

lazy-loading

angular-routing

angular