Question

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

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

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

Angular 2/4甚至可以实现这一点吗？

如果是这样，你能指点我一些有利的阅读吗？

感谢。

Answer 1

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

在您的路线配置中，您将定义两条主要路线/user＆amp; /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;
    */

  }
}

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

Angular Child Routes   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

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

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

请参阅文档，其中包含所有可能配置的示例：angular routing module

修改

从角度文档中，可以看出如何为某些路径设置角度路由模块。

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

您可以创建多个路由模块，并根据需要将其导入其他模块。

Angular 2 Admin导航/路线与客户端导航/路线分开

2 个答案:

路由配置

角色守卫