JavaScript/Vue中调用Keycloak authz.js获取RPT返回空如何解决

常见返回空的原因 #

• 客户端包和Keycloak服务端版本不匹配：keycloak.js和keycloak-authz.js必须和你部署的Keycloak服务端大版本完全一致，跨版本调用是RPT返回空的最高发原因
• 调用时机错误：调用entitlement接口前必须确认Keycloak实例已经完成初始化、用户已完成登录拿到有效access_token，未鉴权状态下调用必然返回空
• 配置错误：传入的client ID和Keycloak控制台配置不一致、目标客户端未开启Authorization Enabled开关，也会导致返回空
• 路径错误：17+版本的Keycloak（Quarkus架构）默认移除了旧版的/auth路径前缀，服务地址配置错误会导致接口返回异常空值

Vue环境可运行实现 #

1. 初始化逻辑（建议放到路由前置守卫/Vuex初始化流程中） #

import Keycloak from 'keycloak-js'
import KeycloakAuthorization from 'keycloak-js/dist/keycloak-authz'

// 替换成你自己的Keycloak配置
const keycloakConfig = {
  url: '你的Keycloak服务地址',
  realm: '你使用的Realm名称',
  clientId: 'extranet'
}

const keycloakInstance = new Keycloak(keycloakConfig)
let authzClient = null

// 初始化方法，必须等该方法执行完成后再调用授权接口
export const initKeycloakAuth = async () => {
  const authenticated = await keycloakInstance.init({
    onLoad: 'login-required',
    checkLoginIframe: false
  })

  if (!authenticated) {
    window.location.reload()
    return
  }

  // Keycloak鉴权成功后再初始化授权客户端
  authzClient = new KeycloakAuthorization(keycloakInstance)
  return {
    keycloak: keycloakInstance,
    authz: authzClient
  }
}

2. 业务侧获取RPT逻辑 #

// 确保initKeycloakAuth执行完成后再调用该方法
export const fetchRpt = async () => {
  if (!authzClient) throw new Error('授权客户端未完成初始化')

  try {
    // 无特殊权限需求直接传clientId即可，需要申请特定资源/范围权限可传入第二个配置参数
    const rpt = await authzClient.entitlement('extranet', {
      // 示例：申请特定资源权限
      // permissions: [
      //   { id: '指定资源ID', scopes: ['view', 'edit'] }
      // ]
    })

    console.log('获取到的有效RPT:', rpt)
    // 后续调用受保护资源服务时，把rpt放到Authorization请求头即可，格式为`Bearer ${rpt}`
    return rpt
  } catch (err) {
    console.error('获取RPT失败，可查看网络面板entitlement接口响应排查：', err)
    throw err
  }
}

排查提示 #

如果按照上述逻辑还是返回空，直接打开浏览器网络面板筛选entitlement请求，查看接口响应体的具体返回，一般会明确提示是参数错误、权限不足还是配置问题。

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