如何在Angular 2项目中分离管理员和前端网站 [英] How to separate admin and the front web in angular 2 project

问题描述

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

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一个用于Web，另一个用于admin?

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项目中分离管理员和前端网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！