angular 2项目中admin和前台web如何分离

Question

我将使用 angular 2 构建一个完整的项目，该项目包含管理面板和用户的前端 Web。

我不知道如何将管理与网络分开，我应该为此使用路由吗？但这需要我导入 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 受到检查用户角色的守卫的保护。

angular 2项目中admin和前台web如何分离

How to separate admin and the front web in angular 2 project

angular2-routing

angular