基于Keycloak的React微前端认证：核心应用获取子应用Token问题

核心问题拆解 #

你当前的矛盾点在于：子应用原本是独立域名+独立Keycloak客户端的认证模式，现在通过Module Federation集成到核心应用后，需要实现跨应用/跨域的token共享与按需切换，同时要兼顾原有认证流程的兼容性。

可行实现方案 #

方案1：核心应用统一管控所有子应用Token #

• 先在Keycloak中配置核心应用客户端：将所有子应用域名加入Allowed Origins，开启Authorization Code Flow with PKCE（公开客户端的安全首选）
• 核心应用初始化Keycloak后，通过Keycloak的API批量获取各子应用客户端的token：调用token端点时指定不同的client_id（app_one/app_two/app_three），利用用户已有的会话直接获取，无需重复登录
• 把各客户端的token按ID分类存储（比如sessionStorage.setItem('token_app_one', token)），避免localStorage的XSS风险
• 子应用通过Module Federation导入核心应用暴露的getAppToken(clientId)方法，替换原有从自身localStorage取token的逻辑，axios请求时动态获取对应token

方案2：子应用保留独立认证，核心应用做状态同步 #

• 核心应用作为入口，用户登录后，切换子应用时先检查该子应用是否已有有效token：
  • 若无，跳转到子应用的Keycloak登录页（子应用原有流程），登录成功后通过postMessage将token发送给核心应用（注意设置正确的targetOrigin避免跨域问题）
  • 若有，直接从核心应用的存储中获取并传递给子应用
• 子应用修改axios拦截器，优先从核心应用共享的状态（比如React Context）中获取token， fallback到自身原有逻辑

最佳实践优化 #

• 统一会话，避免重复登录：在Keycloak中为所有客户端配置同一个SSO Session Idle Timeout和SSO Session Max Lifetime，开启跨客户端会话共享。用户在核心应用登录一次后，访问任意子应用时可自动获取对应客户端的token，无需重复验证
• 封装共享认证模块：把Keycloak的初始化、token获取/刷新、存储逻辑封装成独立模块，通过Module Federation暴露给核心应用和所有子应用。模块内部根据当前激活的子应用路由，自动切换对应的client_id处理认证
• 替换localStorage为安全存储：放弃localStorage，改用sessionStorage（会话结束即失效）+ React Context（内存存储），降低XSS攻击导致的token泄露风险
• 统一axios实例：在共享模块中封装全局axios实例，拦截器自动识别当前子应用的client_id，从共享存储中获取对应token并附加到请求头。所有子应用直接使用该实例，无需重复编写token处理逻辑

内容的提问来源于stack exchange，提问作者Jagadeesh Kumar CK