关键在于用broadcastchannel触发各窗口统一读取localstorage，而非同步数据本身；因storage事件不触发同窗口监听，需先落盘再广播，所有窗口始终以localstorage为唯一可信源。
关键不是“用 BroadcastChannel 同步身份”，而是用它触发所有窗口统一读取 localStorage —— 因为 localStorage 才是唯一可信的数据源，BroadcastChannel 只负责喊一声“该刷新了”。
为什么不能只靠 localStorage 的 storage 事件
storage 事件有个硬伤：同一窗口内修改 localStorage，自身监听器不会触发。比如你在窗口 A 登录并存入 token，窗口 A 的 UI 不会自动更新，头像还是游客状态；只有其他窗口（B、C）能收到通知。这导致单窗口内状态错乱。
- 用户在窗口 A 切换身份后，A 页面显示未更新，权限菜单仍为旧身份
- 多个窗口各自维护一份内存状态，互相不感知，最终数据分裂
- 无法处理快速连续切换（如连点两次不同账号），消息可能丢失或覆盖
正确流程：两步分离，各司其职
把“身份切换”拆成明确的两个动作：先落盘，再广播。所有窗口无论何时、以何种方式收到通知，都必须重新读取 localStorage，而不是相信消息里带的数据。
-
写入时：先
localStorage.setItem('activeIdentity', JSON.stringify(identity))，再channel.postMessage({ type: 'IDENTITY_SWITCHED' }) -
初始化时：页面加载完成立刻从
localStorage.getItem('activeIdentity')读取，不等广播 -
收到消息后：再次调用
localStorage.getItem('activeIdentity')，用返回值更新 UI 和权限逻辑
频道与生命周期管理要点
细节决定成败。一个大小写错误或漏掉关闭操作，就可能让同步失效或引发内存泄漏。
- 频道名必须完全一致，例如
'auth-identity-channel'，大小写敏感，不能带空格或特殊字符 - 所有页面一打开就要创建
new BroadcastChannel(...)，不能按需懒创建 - Vue/React 组件卸载或页面关闭前，务必调用
channel.close()；不要在身份切换时 close，否则收不到后续消息 - 后台标签页可能被节流收不到消息，建议加兜底：页面可见时每 30 秒检查一次 localStorage 是否变化
离线与边界情况怎么兜住
用户可能关掉一个标签页后再切回另一个，也可能在无网状态下反复切换身份。这些场景下，仅靠实时广播不可靠。
- 不依赖消息顺序：永远以 localStorage 内容为准，哪怕消息延迟或重复到达
- 快速连切时，后一次 setItem 会自然覆盖前一次，无需额外锁机制
- 若需离线后补同步（比如用户关闭所有窗口后又重开），可配合 Service Worker 缓存变更并唤醒页面
- Safari 无痕模式可能禁用 BroadcastChannel，可降级为 localStorage + storage 事件（仅作 fallback）
