BroadcastChannel 实现跨标签页 SSO 状态同步，核心是状态变更后主动广播并监听响应：登录/登出完成且本地持久化后立即发送 type、timestamp 等结构化消息；各页初始化时监听同一频道，通过 fromTabId 避免自循环，幂等处理；不支持时降级为 localStorage + storage 事件；需注意同源限制、消息延迟及敏感信息禁止广播。
利用 BroadcastChannel 实现跨标签页 SSO 状态同步，核心在于“状态变更时主动广播 + 各标签页监听并响应”，它不替代登录逻辑，而是补足浏览器多标签场景下的状态一致性。关键点是：SSO 登录/登出完成后的状态更新必须触发一次广播，且所有监听页需能安全、幂等地处理重复或延迟消息。
确保 SSO 状态变更后立即广播
在主登录页（如 OAuth 回调页）或登出页完成身份写入（如更新 localStorage、写入 cookie、设置 auth token）后，立刻用 BroadcastChannel 发送结构化消息：
- 消息体建议包含
type（如"auth:login"或"auth:logout"）、timestamp（毫秒时间戳）、可选的userId或tokenExpiry - 避免在未确认登录成功前广播——例如等待后端接口返回 200 且本地持久化完成后再发
- 示例：
const bc = new BroadcastChannel('sso-channel');<br>bc.postMessage({ type: 'auth:login', userId: 'u123', timestamp: Date.now() });
各标签页统一监听并响应状态变更
每个页面（包括已打开的旧标签）应在初始化阶段创建并监听同一频道，收到消息后执行本地状态刷新逻辑：
- 监听前先检查当前页面是否为“广播源”（可通过
event.source判断，但更可靠的是加字段标识，如fromTabId: window.name || Math.random().toString(36).substr(2, 9)），避免自己发的消息触发自身重复处理 - 响应动作应幂等：比如登出消息到达时，清空本地 token 并跳转登录页；若已登出，则忽略；可用
localStorage.getItem('authToken')做前置校验 - 注意兼容性：Safari 15.4+、Chrome 54+、Firefox 58+ 支持，旧版需降级到
localStorage+storage事件（见下条）
兜底方案：localStorage + storage 事件兼容老浏览器
当 BroadcastChannel 不可用时（如 Safari localStorage 写入触发 storage 事件实现类似效果：
- 登录成功后：
localStorage.setItem('sso:state', JSON.stringify({ type: 'login', timestamp: Date.now() })) - 监听
window.addEventListener('storage', e => { if (e.key === 'sso:state') { /* 处理 */ } }) - 注意：
storage事件不会在触发页自身触发，只通知其他同源标签页，这点与BroadcastChannel行为一致 - 为防污染，建议使用唯一 key 前缀（如
sso:v2:）并定期清理过期项
避免常见陷阱
实际落地中容易忽略的细节：
- 频道名称必须完全一致且同源：不同协议（http/https）、端口、子域均视为不同源，无法通信
- 不要依赖广播顺序或即时性：消息可能延迟或丢失（尤其页面处于后台或休眠），需配合定时轮询 / WebSocket 心跳做最终一致性保障
-
登出要全局强制：收到登出消息后，除清除本地状态外，建议调用
bc.close()并销毁相关监听器，防止后续误触 -
敏感信息勿走广播：token、密码等绝不能放在
postMessage中，只传状态类型和必要元数据
