如何在angular 2项目中分离管理员和前端web

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

我不知道如何将管理员与web分开，我应该为此使用路由吗？但是这需要我导入

app.module.ts

中的所有组件，或者有另一种方法使用两个

app.module.ts

一个用于web，一个用于管理员

---

或者我应该怎么做？

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

所以你会有这个：

- +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 {}

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

即可加载管理区模块，该模块将有另一个路由器模块，其外观如下所示：

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 {}

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

由一个检查用户角色的警卫保护。

您正在寻找基于角色的应用程序吗？管理员与web完全不同，然后只需构建一个完全不同的web应用程序。详细说明完全不同的应用程序。我不知道在这种情况下什么是最好的，这是一个像YouTube这样的视频网站，我应该制作管理面板还是只制作一个带有一个ui和ACL的项目？如何使用路由更改模块？你能解释一下你是怎么做到的吗？@MoustafaElkady更新了答案。为什么你把仪表板和登录作为一个模块而不是组件，因为每个页面都应该是一个模块。这是最佳实践，也允许您延迟加载我在这里完成的模块。您可以添加website.module&&login.module的完整内容吗，因为我不知道它会是什么样子