代码之家 › 专栏 › 技术社区 › Steven Scott

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

angular-routing lazy-loading routing angular

Steven Scott · 技术社区 · 7 年前

/
/home
/admin
    /setup
    /other

我有路由器使用模块和延迟加载。所以管理员页面( /admin /管理员 )将被路由保护,但现在我只是建立空模板和一些简单的路由测试。这一切都奏效了。捕获错误地址,缺少路由到的地址 / 等等。

我的问题是如何保护我的地址,这样人们就不能绕过应用程序的真正路径,到达他们不应该看到的页面。去 /setup 而不是 /admin/setup .

代码可以正常工作转到/admin/setup,/admin/set将转到/root。我遇到的问题是/setup还转到setup的lazy-loaded模块,它是管理模块路由的子模块。

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

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)
    ]
})

管理员-路由.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:添加导入管理员路由的示例管理模块.ts.

管理模块.ts

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

问题是我可以正确地转到/admin/setup。但是,您也可以通过简单地转到/设置来访问此页面。我不想有人能够绕过路由和得到限制页面。

我不知道该如何防范这条路线( )工作。

0 回复 | 直到 7 年前

Gilsdav 7 年前

如果我看一下你的路线,我想你会有这样的路线:

/
/家
/admin/admin(因为父级中有admin,子级中有admin)
/管理员/zzz

但我不明白你的路线之前的“/”。可能是问题所在。

你试过那样的事吗?(如果管理员组件中也有路由器插座,则此选项有效)

管理员-路由.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) }
        ]
    }
];

管理模块.ts

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

Jens Alenius 7 年前

我会这样做的

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

在延迟加载的模块中安装模块以及zzz.模块. 对那里的任何路线都做同样的改变