Angular如何基于Keycloak角色实现菜单权限管控

1. 路由配置补充权限字段 #

和现有AuthGuard的校验逻辑匹配，给需要权限控制的路由新增data.roles配置：

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  {
    path: 'home',
    loadChildren: () => import('./core/modules/home/home.module').then((m) => m.HomeModule),
    canActivate: [AuthGuard],
    // 示例：home页所有登录用户都可访问，也可配置为['admin', 'user']
    data: { roles: [] }
  },
  {
    path: 'template',
    loadChildren: () =>
    import('./core/modules/template/template.module').then((m) => m.TemplateModule),
    canActivate: [AuthGuard],
    // 示例：template模块仅admin角色可访问
    data: { roles: ['admin'] }
  },
]

2. 导航栏TS逻辑改造 #

注入KeycloakService，给导航项加权限配置，新增通用权限校验方法：

import { KeycloakService } from 'keycloak-angular';

export class NavBarComponent {
  constructor(private keycloak: KeycloakService) {}

  navBarItem = [
    {
      name: 'Home',
      icon: '',
      route: 'home',
      children: [],
      // 和对应路由的roles配置保持一致
      requiredRoles: []
    },
    {
      name: 'Template',
      icon: '',
      route: 'template/listar-template',
      children: [],
      requiredRoles: ['admin']
    },
  ]

  // 通用权限校验方法
  hasPermission(requiredRoles: string[]): boolean {
    // 没有配置要求角色则所有登录用户可见
    if (!requiredRoles || requiredRoles.length === 0) {
      return true;
    }
    // 获取当前用户的所有角色
    const userRoles = this.keycloak.getUserRoles();
    // 校验是否满足所有要求的角色，和AuthGuard逻辑保持一致
    return requiredRoles.every(role => userRoles.includes(role));
  }
}

3. 模板HTML调整 #

在导航项的显示判断中新增权限校验规则：

<mat-nav-list *ngFor="let navItem of navBarItem">
      <div *ngIf="navItem.children.length === 0 && hasPermission(navItem.requiredRoles)" class="teste">
        <a routerLink="{{ navItem.route }}">{{ navItem.name }}</a>
      </div>
</mat-nav-list>

如果需要对子菜单也做权限控制，只需要给children数组的每个子项也增加requiredRoles字段，循环子项时调用同一个hasPermission方法即可，逻辑完全复用。

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