与客户端导航/路线分开的Angular 2管理员导航/路线

Question

我知道Angular 2喜欢使用单个导航在页面之间进行切换。 我的问题是管理员导航与面向客户的导航完全不同。

我的目标是让管理员及其所有路由与客户端及其所有路由分开运行。

例如：如果您进入根页面或/ video页面，则需要处理客户端路由器和导航。 如果转到/ admin或/ admin / client，则仅处理管理端路由器和导航。

使用Angular 2/4甚至可能吗？

如果是这样，您能指出我一些有益的读物吗？

谢谢。

Answer 1

这是一个可能的解决方案，它使用基本路由和防护来保护仅用于管理员权限的特定路由。

在您的路由配置中，您将定义两个主要路由/user和/admin 。 然后，您可以为这两个主要路由定义子路由，它们将从父路由延伸出去（例如/admin/dashboard或/user/account ）

然后，您可以根据用户角色或您决定的内容，来控制谁有权访问这些路由。 如果要将用户详细信息存储在本地存储中，则还可以存储用户角色。

以下是未经测试的示例。 我在代码块中有一些解释的注释。 我还提供了一些链接来撰写有关路由和防护的文章。 希望这会有所帮助。

路由配置

app.routing.ts

import { NgModule } from '@angular/core';


import { AdminComponent } from './admin.component';
import { AdminDashboardComponent } from './admindashboard.component';
import { UserAccountComponent } from './useraccount.component';
import { UserComponent } from './user.component';

import { RoleGuard } from './role.guard';

const appRoutes: Routes = [
  {
    path: 'user',
    canActivateChild: [RoleGuard],        // <-- This guard will run before the router directs you to the route
    data: { roles : ['ROLE_USER'] },      // <-- Current Login in user must have role user.   You can access this array inside your guard.
    children: [
      {
        path: '',                    // <-- This should equal /user
        component: UserComponent,
        pathMatch: 'full'
      },
      {
        path: 'account',              // <-- This should equal /user/account
        component: UserAccountComponent,
        pathMatch: 'full'
      }
      // <-- The rest of your user routes
    ]
  },
  {
    path: 'admin',
    canActivateChild: [RoleGuard],         // <-- This guard will run before the router directs you to the route
    data: { roles : ['ROLE_ADMIN'] },      // <-- Current Login in user must have role admin
    children: [
      {
        path: '',
        redirectTo: '/admin/dashboard'   // <-- Redirects to dashboard route below
      },
      {
        path: 'dashboard',
        component: AdminDashboardComponent,
        pathMatch: 'full'
      }
      // <-- The rest of your admin routes
    ]
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes, { useHash: true })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

角色守卫

role.guard.ts

import { Injectable } from '@angular/core';
import { Router, CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable()
export class RoleGuard implements CanActivateChild {

  constructor(
    private router: Router
  ) {}

  canActivateChild(route: ActivatedRouteSnapshot, 
       state: RouterStateSnapshot): boolean {

    const userRoles: string[] = this.authService.getRoles();  // <--------- get the current user's roles
    const routeRoles: string[] = route.data['roles'];   // <------- Will get the roles arry you defined in your router config

    /*
      Now you can do your logic to determine if the user has the appropriate role.
      If they do return true
      Else use router to set a redirect route to /user url or whereever you feel like and return false;
    */

  }
}

Angular路由器http://blog.angular-university.io/angular2-router/

角子路线https://angular-2-training-book.rangle.io/handout/routing/child_routes.html

Angular CanActivateChild https://angular.io/api/router/CanActivateChild

有关路由的更多信息https://blog.thoughtram.io/angular/2016/06/14/routing-in-angular-2-revisited.html

Answer 2

您可以在多个位置设置路由，包括专用路由模块。

例如，您可以在另一个根模块中导入多个路由模块。

请参考文档，其中提供了所有可能配置的示例示例： 角形布线模块

编辑

从角度文档中，这是如何为某些路径设置角度路由模块的方法。

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HeroListComponent }    from './hero-list.component';
import { HeroDetailComponent }  from './hero-detail.component';

const heroesRoutes: Routes = [
  { path: 'heroes',  component: HeroListComponent },
  { path: 'hero/:id', component: HeroDetailComponent }
];

@NgModule({
  imports: [
    RouterModule.forChild(heroesRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class HeroRoutingModule { }

这就是将其导入另一个模块的方式：

import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';
import { FormsModule }    from '@angular/forms';

import { HeroListComponent }    from './hero-list.component';
import { HeroDetailComponent }  from './hero-detail.component';

import { HeroService } from './hero.service';

import { HeroRoutingModule } from './heroes-routing.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    HeroRoutingModule
  ],
  declarations: [
    HeroListComponent,
    HeroDetailComponent
  ],
  providers: [ HeroService ]
})
export class HeroesModule {}

您可以创建几个路由模块，然后根据需要将它们导入其他模块。