如何在Angular应用的多个同域标签页之间共享OAuth令牌

最优方案：使用angular-auth-oidc-client原生多标签页同步能力 #

这是最简洁可靠的方案，不需要额外开发自定义逻辑：

• 你使用的angular-auth-oidc-client v12及以上版本内置了syncSessionAcrossBrowserTabs配置项，将其设置为true即可开启多标签页会话同步能力
• 库会自动通过BroadcastChannel实现所有同域标签页的令牌同步：新标签页打开时会主动向其他已登录的标签页请求有效令牌，直接写入自身的sessionStorage，不需要跳转IDP登录
• 内置了刷新令牌互斥逻辑，不会出现多个标签页同时调用刷新接口的问题，完全适配你提到的三类新标签页打开场景，同时保留了sessionStorage浏览器关闭自动清除的特性

备选方案1：localStorage存储+会话级清理 #

如果你使用的库版本较低不支持原生同步，可采用该方案：

• 将令牌存储介质从sessionStorage切换为localStorage，天然支持同域多标签页共享，angular-auth-oidc-client默认兼容该存储方式，自带刷新令牌互斥能力
• 新增监听beforeunload事件，统计当前存活的同应用标签页数量，当最后一个标签页关闭时，清空localStorage中的令牌数据，实现和sessionStorage一致的「浏览器关闭自动清除令牌」效果
• 兼容处理页面崩溃场景：给localStorage存储的令牌额外添加和原令牌有效期一致的过期标识，就算崩溃场景未触发清理逻辑，下次打开浏览器时也会自动判定令牌过期跳转登录，无安全风险

备选方案2：Service Worker代理 #

如果你的应用本身需要做请求拦截、离线支持，可采用该方案：

• 将令牌存储、刷新、请求头注入的逻辑全部交给Service Worker处理，所有标签页的请求都走Service Worker代理，全局仅维护一套有效令牌，天然不存在多标签页同步问题
• 可自行配置Service Worker的存储清理时机，保证浏览器关闭后令牌被清除，该方案的开发复杂度高于前两种，适合有相关需求的场景

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