Angular2 路由 canActivate 和 AuthGuard (JWT) 以及用户角色参数

Angular 2中使用canActivate和AuthGuard（JWT）实现基于用户角色的路由保护

typescript
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) { }
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
    if (this.authService.isAuthenticated()) {
      // 用户已登录
      const roles = next.data.roles as Array;
      if (roles && roles.length > 0) {
        // 检查用户角色是否匹配
        if (this.authService.hasRoles(roles)) {
          return true;
        } else {
          // 用户角色不匹配，重定向到无权限页面
          this.router.navigate(['/unauthorized']);
          return false;
        }
      } else {
        // 没有指定角色要求，允许访问
        return true;
      }
    } else {
      // 用户未登录，重定向到登录页面
      this.router.navigate(['/login']);
      return false;
    }
  }
}

typescript
const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard], data: { roles: ['admin'] } },
  { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard], data: { roles: ['user', 'admin'] } },
  { path: 'unauthorized', component: UnauthorizedComponent },
  { path: 'login', component: LoginComponent },
  // 其他路由配置...
];