Question

我要使用的应用程序具有以下简单结构：

/
/home
/admin
    /setup
    /other

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

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

试图保持事物的独立性，我不想依赖所有子模块上的路由保护器，而只依赖于受保护页面下的路由。这样，在开发人员忘记添加防护的情况下，将自动保护在管理页面下加载的新模块。而且，各个功能模块都有自己的路由，因此，大多数示例都不会将其放在一个中央位置。

代码在/ admin / setup下正常工作，/ admin / set将转到/ root下。我遇到的问题是/ setup也转到安装程序的延迟加载模块，该模块是Admin模块路由的子级。

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

app-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

你好，我不确定我是否很好地理解了您的问题，也不太了解您的管理路线。

如果我阅读了您的路线，我希望您有以下路线：

/
/ home
/ admin / admin（因为在父级中有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 { }

如果在此处导入模块，您会注意到使用了lazy-load，并将路由添加到当前模块中。

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路由，子路径中的子路径可以跳过父路径来访问子路径

2 个答案: