window.addEventListener('storage', e => {
if (e.key === 'auth' && e.newValue) {
useAuth.getState().hydrate(JSON.parse(e.newValue));
}
});
A 标签页退出登录,B 标签页右上角还显示用户名,点进去才跳登录。同一浏览器开三个标签页,登录态各算各的。先别急着动参数,把报错原文和时间点记下来,顺序反了容易白折腾。
原因不复杂,登录信息只存在内存 store 里,写入 localStorage 后没有监听 storage 事件。这个事件只在其他标签页触发,当前页收不到,于是两边各留一份状态。
这次卡住的地方就在「多标签页状态同步」这一环,单独把它拎出来验证,别和其他改动混在同一次发布里。备份不是备了就行,恢复一次才算数,很多备份文件打开才发现是空的。
接口问题先分清是没发出去、发出去了没收到,还是收到了处理失败。
处理上按这个顺序:在根组件挂 storage 监听 只处理自己关心的 key;收到变更后把新值写回 store 并清掉受影响的缓存;退出登录先清持久化再广播 避免别的页读到半截状态;开两个标签页互相登录退出 核对显示。
改完只确认一件事:A 页退出后 B 页在 1 秒内跳到登录页,用户名不再显示。
