如何在角度2項目中分開管理員和前臺網頁

Question

我將使用角度2來構建完整項目，該項目包含管理面板和麪向用戶的前端網站。

我不知道如何將管理員從網絡中分離出來，我應該使用這個路由嗎？但是這需要我導入app.module.ts中的所有組件，或者有另一種方法可以使用兩個app.module.ts一個用於網頁，一個用於管理員？

或者我該怎麼辦？

Answer 1

我最近建立了這個，我所做的只是將路線分成兩個不同的模塊。

所以你有這樣的：

- +admin 
    - routes 
    - +dashboard 
    - +login 
    - ... etc 
- +website 
    - routes 
    - +home 
    - +profile 
    - ... etc 

然後你想做的事就是使用canLoad後衛，以防止，如果你無權這樣做被加載的模塊。這將保護前端的管理區域，以便代碼不會暴露，除非您是具有該特權的管理員。

如果您不想將項目拆分爲兩個較小的項目，這是最簡單的方法。由於在應用程序中分享內容變得更加複雜，我不會親自做這件事。

編輯：

路由應該是這樣的：

const routes: Routes = [ 
    { 
    path: '', 
    loadChildren: 'app/+website/website.module#WebsiteModule' 
    }, 
    { 
    path: 'admin', 
    loadChildren: 'app/+admin-area/admin-area.module#AdminAreaModule' 
    } 
]; 

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

export class AppRouterModule {} 

所以，簡單地將/admin將加載管理區模塊，這將有另一個路由器模塊看起來像這樣：

const routes: Routes = [ 
    { 
    path: '', 
    component: AdminAreaComponent, 
    children: [ 
     { 
     path: 'login', 
     loadChildren: 'app/+admin-area/pages/+login/login.module#LoginModule' 
     }, 
     { 
     path: 'dashboard', 
     loadChildren: 'app/+admin-area/pages/+dashboard/dashboard.module#DashboardModule', 
     canLoad: [AuthGuardService] 
     } 
    ] 
    } 
]; 

@NgModule({ 
    imports: [ 
    ComponentsModule, 
    SharedModule, 
    RouterModule.forChild(routes) 
    ], 
    declarations: [ 
    AdminAreaComponent 
    ] 
}) 

export class AdminAreaRouterModule {} 

在這裏您可以看到/admin/dashboard受護衛它檢查用戶的角色。