Angular 2基于角色的导航在同一路径上

Question

我有一个关于Angular 2路由器的小问题,3.0.0-rc.1我希望根据用户角色(例如AdminComponent或UserComponent)导航到不同的主组件.任何人都可以帮助修改以下路线,以便我可以实现所需的功能吗？

{path: 'login', component: LoginComponent},  // <--- This redirects to '/' in case user is logged in
{
  path: '',
  component: HomeComponent,               
  canActivate: [AuthGuardService],  // <--- Check if user is logged in, else redirect to login
  children: [
    {
      path: '',
      component: AdminComponent  // <--- Want to navigate here if user role is 'admin'
    },
    {
      path: '',
      component: UserComponent  // <--- Want to navigate here if user role is 'user'
    }
  ]
}

AuthGuardService.ts

import {Injectable} from "@angular/core";
import {CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot} from "@angular/router";
import {AuthService} from "./auth.service";

@Injectable()
export class AuthGuardService implements CanActivate {

  constructor(private authService: AuthService, private router: Router) {
  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (this.authService.isLoggedIn()) {
      return true;
    }

    // Store the attempted URL for redirecting
    this.authService.redirectUrl = state.url;

    // Navigate to the login page with extras
    this.router.navigate(['/login']);
    return false;
  }
}

AuthService.ts

import {Injectable} from "@angular/core";

@Injectable()
export class AuthService {
  redirectUrl: string;

  logout() {
    localStorage.clear();
  }

  isLoggedIn() {
    return localStorage.getItem('token') !== null;
  }

  isAdmin() {
    return localStorage.getItem('role') === 'admin';
  }
}

谢谢.

Answer 1

问题是两条路线不能具有相同的路径。您可以进行的最简单的更改是将路径更改为如下所示：

   {
      path: 'admin',
      component: AdminComponent 
    },
    {
      path: 'user',
      component: UserComponent
    }

这可能是最好的选择，因为您希望组件根据用户角色而有所不同。您可能还希望其他组件有所不同，您可以通过将子组件添加到管理或用户路由来轻松实现这一点。

在你的 AuthGuard 中，你仍然只返回 true，但是你为管理和用户路由设置了另外两个守卫。检查用户是否是管理员。

您可以通过在用户登录后检查用户角色来重定向到正确的路线，然后在您执行的组件中进行router.navigate(['/admin'])或router.navigate(['/user'])