帶有延遲加載模塊的 Angular 8 路由，子路由中的子路由可以跳過父路由來訪問子路由

Question

我正在嘗試使用的應用程序中有以下簡單結構：

/
/home
/admin
    /setup
    /other

我有使用模塊和延遲加載的路由器。 因此，我的應用程序的管理員頁面 ( /admin ) 控制對用於設置應用程序的子頁面的訪問。 最終，管理路由 ( /admin ) 將受到路由保護，但現在我只是構建空模板和一些簡單的路由測試。 這一切都在起作用。 錯誤地址被捕獲，丟失地址路由到/等。

我的問題是保護我的地址，以便人們無法繞過應用程序的真實路由並訪問他們不應該看到的頁面。 轉到/setup而不是/admin/setup 。

為了讓事情自成一體，我不想依賴所有子模塊上的路由守衛，只依賴受守衛的頁面下的路由。 這樣，在管理頁面下加載的新模塊將自動受到保護，以防開發人員忘記添加保護。 此外，各個功能模塊都有自己的路由，因此這並不像大多數示例使用的那樣位於一個中心位置。

代碼在 /admin/setup 中正常工作，/admin/set 將進入 /root。 我遇到的問題是 /setup 也轉到安裝程序的延遲加載模塊，它是管理模塊路由的子項。

編輯：根據建議更新路由模塊，但問題仍然存在。

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 中添加管理員路由的示例導入。

管理模塊.ts

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

問題是我可以正確地進入/admin/setup。 但是，您也可以通過簡單地轉到 /setup 來訪問此頁面。 我不希望有人能夠繞過路由並訪問受限頁面。

我不確定如何防止這條路線 ( /setup ) 工作。

Answer 1

您好，我不確定我是否了解您的問題，我也不了解您的管理路線。

如果我閱讀了您的路線，我希望您有以下路線：

• /
• /家
• /admin/admin （因為你在父級有 admin，在子級有 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) }
        ]
    }
]; 

管理模塊.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 中。 對那里的任何路線進行相同的更改