Angular 11角色权限控制异常 仅operator生效super_admin无法访问页面

问题根因与修复方案 #

1. 路由配置语法错误 #

原路由配置的data字段写法不符合Angular路由规范：

// 错误写法
data:{ roles:['operator']} || {roles:['super_admin'] }

JS 运算中对象属于真值，|| 运算符会直接返回第一个真值对象，所以实际生效的roles数组只有['operator']，super_admin角色未被纳入允许范围。
修复后写法：

{
  path: 'dashboard', 
  component: DashboardComponent, 
  canActivate:[AuthGuardGuard], 
  data:{ roles:['operator', 'super_admin'] }
}

2. roleMatch匹配逻辑致命错误 #

当前roleMatch方法在两层循环的第一次比对后就直接返回结果，不会遍历后续角色：

• 如果第一个用户角色和第一个允许角色不匹配，直接返回false，后续角色完全不会被校验
• 即使存在匹配的角色，只要不是第一层循环的第一个用户角色、第二层循环的第一个允许角色，就会被判定为无权限
  修复后的roleMatch方法：

public roleMatch(allowedRoles: string[]): boolean {
  const userRoles = this.token.getRoles();
  if (!userRoles || !Array.isArray(userRoles)) return false;
  // 遍历所有用户角色，只要有一个匹配就返回true
  return userRoles.some(userRole => 
    allowedRoles.includes(userRole.name)
  );
}

3. 菜单判断逻辑优化（可选） #

当前菜单项的*ngIf写了两次roleMatch调用，可以简化为一次传参：

*ngIf="dataService.roleMatch(['operator', 'super_admin'])"

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