基于oidc-client的两个OAuth2 React应用如何实现同浏览器同时登录

你遇到的状态互斥问题，根本不是OAuth2流程的设计问题，是oidc-client默认的存储规则存在同域共享的特性：同域名下不管应用部署在哪个路径、哪个子路径，读写localStorage时使用的存储键名是固定通用的，都是不带应用标识的oidc.user、oidc.state这类键，后登录的应用会直接覆盖前一个应用存储的token，才会出现登完App1必须退出才能登录App2的情况。

1. 先做本地存储键的硬隔离 #

这是解决同浏览器下多应用状态冲突的核心，直接在每个应用初始化UserManager的时候，给内置的WebStorageStateStore添加专属的应用前缀，让两个应用的本地存储键完全不重叠：

• App1（管理员应用）的UserManager配置：

import { UserManager, WebStorageStateStore } from 'oidc-client'

const app1UserManager = new UserManager({
  // 保留你原有的独立OIDC基础配置：authority、client_id、redirect_uri、response_type这些每个应用专属的参数无需改动
  userStore: new WebStorageStateStore({
    store: window.localStorage,
    prefix: "app1_" // 所有存储键都会自动加上这个前缀，比如原本的oidc.user会变成app1_oidc.user
  }),
  // 开启自动静默续期，配合后续SSO配置实现免跳转登录
  automaticSilentRenew: true,
  // 配置每个应用专属的静默回调地址，不要和另一个应用共用
  silent_redirect_uri: "/app1-silent-callback.html"
})

• App2（任务执行应用）的UserManager配置：

const app2UserManager = new UserManager({
  // 保留App2自己的独立OIDC基础配置
  userStore: new WebStorageStateStore({
    store: window.localStorage,
    prefix: "app2_" // 和App1完全不同的前缀，从根源上避免键值覆盖
  }),
  automaticSilentRenew: true,
  silent_redirect_uri: "/app2-silent-callback.html"
})

配置生效后，两个应用在同域下localStorage存储的token、状态值是完全独立的，不存在一方退出操作连带清除另一方状态的问题，哪怕同时开两个标签页分别登录两个应用，两边的登录态都能正常保留。

2. 对齐认证服务的全局SSO能力，实现免二次跳转登录 #

光做本地存储隔离只是解决了状态互相覆盖的问题，要真正实现同浏览器下两个应用同时保留登录态、不需要反复跳转登录页，还要对齐认证服务的会话规则：

• 把认证服务的全局会话Cookie的域配置为两个应用的公共父域，比如两个应用分别部署在admin.xxx.com和task.xxx.com，就把认证Cookie的Domain设置为.xxx.com，这样子域下的所有应用发起OIDC认证请求时，认证服务都能识别到已存在的全局登录会话，直接签发对应应用的token，不需要用户重新输入账号密码。
• 不要在两个应用之间手动传递token，完全走OIDC标准的授权码+静默续期流程，避免本地存储隔离后出现跨应用状态不一致的问题。

3. 匹配应用层的权限边界规则 #

因为两个应用的存储已经完全独立，刚好可以轻松实现你定义的权限要求：

• App1拿到token之后，校验token内的角色声明，只有包含系统管理员角色的请求才允许进入，其他角色直接拦截
• App2拿到token之后，校验token内的角色声明，只要识别到是系统管理员身份，直接拦截拒绝访问，普通用户身份才放行

• 不要给两个应用设置相同的存储前缀，哪怕前缀有部分重叠，还是会出现键值覆盖的问题
• 不要用sessionStorage替代localStorage做存储，sessionStorage会在浏览器标签关闭时自动清除，没法实现多标签下的登录态保持
• 退出登录时，只调用当前UserManager的removeUser方法清除当前应用对应前缀的存储值，不要为了省事直接执行localStorage.clear()，否则会把同浏览器下另一个应用的登录态直接清空，之前做的隔离就完全失效
• 不要把两个应用的client_id配置成同一个，那样哪怕存储做了隔离，认证服务也没法根据client_id做权限区分，很容易出现权限判断混乱的问题

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