如何在angular 2项目中分离admin和front web [英] How to separate admin and the front web in angular 2 project

问题描述

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

I'm going to build a full project using angular 2, the project contains admin panel and a front-end web for users.

我不知道如何将管理员与网络分开，我应该为此使用路由吗?但这将需要我导入 app.module.ts 中的所有组件，或者有另一种方法可以使用两个 app.module.ts 一个用于网络，一个用于管理员?

I don't know how to separate admin from the web, should I use routing for this? But this will require me to import all components inside the app.module.ts or there is another way to use two app.module.ts one for the web and one for the admin?

或者我该怎么办?

推荐答案

我最近构建了这个，我所做的只是将路由分成两个不同的模块.

I've built this recently and what I did was simply to split the routes into two different modules.

所以你会有这个:

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

然后你想要做的是使用一个 canLoad 保护来防止模块在你没有被授权的情况下被加载.这将保护前端的管理区域，除非您是具有该权限的管理员，否则代码不会暴露.

Then what you want to do is use a canLoad guard to prevent modules from being loaded if you are not authorised to do so. This will protect the admin area in the frontend so that the code isn't exposed unless you're an admin with that privilege.

如果您不想将项目拆分为两个较小的项目，这是最简单的方法.由于跨应用程序共享内容变得更加复杂，因此我不会亲自这样做.

This is the easiest way of doing it if you don't want to split the project into two smaller projects. Which I wouldn't do personally since sharing things across the apps becomes more complicated.

路由看起来像这样:

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 将加载管理区域模块，这将使另一个路由器模块看起来像这样:

So simply going to /admin would load the admin area module, which would have another router module looking something like this:

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 由检查用户角色的守卫保护.

Here you can see that /admin/dashboard is protected by a guard which checks the user's role.

这篇关于如何在angular 2项目中分离admin和front web的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！