与客户端导航/路线分开的Angular 2管理员导航/路线 [英] Angular 2 Admin navigation/routes separate from Client side navigation/routes

问题描述

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

I know Angular 2 likes to use a single navigation to switch between pages. My issue is that the admin navigation is completely different than client facing navigation.

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

My goal is to have an admin and all of its routes run separate from the client side and all of its routes.

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

For example: If you go the root page, or the /video page, you deal with client side routers and navigation. If you go to /admin or /admin/client, you deal with only the admin side routers and navigation.

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

Is this even possible with Angular 2/4?

如果是的话，您能指出我一些有益的读物吗?

If so, can you point me to some advantageous reading?

谢谢.

推荐答案

以下是一种可能的解决方案，该解决方案使用基本路由和防护措施来仅保护管理员权限的特定路由.

Here is a possible solution using basic routing and a guard to guard specific routes for admin priviledges only.

在路由配置中，您将定义两条主要路由/user& /admin.然后，您可以为这两个主要路线(从/admin/dashboard或/user/account延伸)的两个主要路线定义子路线

In your routing config you will define the two main routes /user & /admin. You can then define child routes for those two main routes where they will extend off the parent route (example /admin/dashboard or /user/account)

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

You can then regulate who has access to those routes based on a user role or whatever you decide. If you're storing user details in local storage, you can also store the users roles.

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

Below is an untested example. I have comments inside the code blocks with a little explanation. I've also supplied a few links to write ups on routing and guards. Hopefully this helps a bit.

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 Router 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

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

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

More on routing https://blog.thoughtram.io/angular/2016/06/14/routing-in-angular-2-revisited.html

这篇关于与客户端导航/路线分开的Angular 2管理员导航/路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！