Angular中如何根据用户角色限制特定路由访问？

当然可以用自定义守卫来实现角色级别的路由访问限制，这也是Angular生态里最常用的做法之一！结合你现有的AuthenticationGuard，我们可以再实现一个角色守卫（RoleGuard），专门负责校验用户角色是否有权限访问目标路由。

具体实现步骤： #

1. 创建角色守卫（RoleGuard）

这个守卫会实现Angular的CanActivate接口，核心逻辑是检查当前登录用户的角色是否匹配路由允许的角色列表。假设你已经有一个AuthService用来获取当前用户信息：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { AuthService } from './auth.service'; // 你的用户认证服务

@Injectable({
  providedIn: 'root'
})
export class RoleGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
    // 先确保用户已登录（如果AuthenticationGuard没提前做的话，这里也可以加判断）
    const currentUser = this.authService.getCurrentUser();
    if (!currentUser) {
      this.router.navigate(['/login']);
      return false;
    }

    // 从路由的data属性中获取允许的角色列表
    const allowedRoles = route.data['allowedRoles'] as string[];
    // 检查当前用户角色是否在允许列表中
    if (allowedRoles.includes(currentUser.role)) {
      return true;
    }

    // 无权限时跳转到无权限页面或首页
    this.router.navigate(['/unauthorized']);
    return false;
  }
}

2. 配置路由，给目标路由添加角色守卫

在你的路由配置里，给需要角色限制的路由同时添加AuthenticationGuard（确保用户已登录）和RoleGuard，并通过data属性指定允许的角色：

path: 'school', 
component: ShellComponent, 
canActivate: [AuthenticationGuard], 
children: [ 
  {
    path: 'education/documents', 
    component: DocumentsComponent,
    // 同时添加两个守卫，先验证登录再验证角色
    canActivate: [AuthenticationGuard, RoleGuard],
    // 指定允许访问的角色
    data: { allowedRoles: ['admin'] }
  }
]

额外说明： #

• 单一职责原则：把登录校验和角色校验分开成两个守卫，代码更清晰，也方便后续复用（比如其他路由只需要角色校验，或者只需要登录校验）。
• 灵活扩展：如果需要支持多角色（比如admin和editor都能访问），只需要修改allowedRoles数组为['admin', 'editor']即可。
• ** fallback处理**：记得在守卫里处理无权限的情况，比如跳转到自定义的403页面，提升用户体验。

内容的提问来源于stack exchange，提问作者POV