Keycloak-Angular按角色限制登录求助：仅允许Admin/X角色用户登录

你的代码核心问题在于权限判断的顺序完全颠倒：在用户完成Keycloak登录前就调用getUserRoles()，此时用户还未完成认证，根本无法获取到有效角色信息，导致权限检查逻辑完全失效，所有用户都能绕过限制执行登录操作。

修正后的登录函数实现 #

先完成登录流程，再验证用户角色，无权限则强制登出并提示：

login() {
  // 先判断是否已登录
  if (!this.keycloak.isLoggedIn()) {
    this.keycloak.login().then(() => {
      // 登录成功后获取用户角色
      const userRoles = this.keycloak.getUserRoles();
      // 定义允许登录的角色列表
      const allowedRoles = ['Admin', 'x'];
      // 检查用户是否拥有任一允许的角色
      const hasPermission = allowedRoles.some(role => userRoles.includes(role));

      if (hasPermission) {
        this.router.navigate(['/home']);
      } else {
        // 无权限则登出并提示
        this.keycloak.logout().then(() => {
          alert('您没有登录权限，请联系管理员');
        });
      }
    }).catch(error => {
      console.error('登录失败:', error);
      alert('登录失败，请重试');
    });
  } else {
    // 已登录状态下也需要校验角色，防止用户手动刷新页面绕过限制
    const userRoles = this.keycloak.getUserRoles();
    const allowedRoles = ['Admin', 'x'];
    const hasPermission = allowedRoles.some(role => userRoles.includes(role));

    if (hasPermission) {
      this.router.navigate(['/home']);
    } else {
      this.keycloak.logout().then(() => {
        alert('您没有访问权限，请联系管理员');
      });
    }
  }
}

进阶：使用路由守卫全局控制权限 #

为了避免用户直接通过URL跳转绕过登录页面的权限检查，建议添加路由守卫（AuthGuard）实现全局权限控制：

1. 创建AuthGuard服务

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { KeycloakService } from 'keycloak-angular';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private keycloak: KeycloakService, private router: Router) {}

  async canActivate(): Promise<boolean> {
    const isLoggedIn = await this.keycloak.isLoggedIn();
    
    // 未登录则先引导登录
    if (!isLoggedIn) {
      await this.keycloak.login();
      return false;
    }

    // 校验角色权限
    const userRoles = this.keycloak.getUserRoles();
    const allowedRoles = ['Admin', 'x'];
    const hasPermission = allowedRoles.some(role => userRoles.includes(role));

    if (!hasPermission) {
      await this.keycloak.logout();
      alert('您没有访问权限，请联系管理员');
      return false;
    }

    return true;
  }
}

2. 在路由配置中使用守卫

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
  // 其他需要权限控制的路由均添加canActivate配置
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

注意事项 #

• 如果你的角色是客户端角色而非Realm角色，需要在getUserRoles()中传入客户端ID，确保获取到正确的角色：this.keycloak.getUserRoles('your-client-id')
• 建议在Keycloak后台也配置相应的客户端权限策略，双重保障访问安全

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