不同标签页同步用户登录状态

场景

1. 用户A在标签页1中登录；
2. 打开标签页2，退出登录并登录用户B；
3. 切换回标签页1，此时从后端获取的数据都为用户B的信息；

说明

因为都是用户自己操作不同账户进行登录登出，此问题仅需前端逻辑控制即可。

解决方法

方法一

1. 在退出登录时在localStorage中写入相关字段标识已经退出登录了。
2. 监听window.onfucus事件，当切换回标签页时，判断localStorage是否有退出登录相关的字段，有就将页面重定向到登录页。

方法二

1. 在退出登录时在localStorage中写入相关字段标识已经退出登录了。
2. 监听window.onstorage事件，当写入localStorage时，不用切换回标签页就能触发事件，判断是否登出并重定向到登录页。

window.onstorage = function (event) {
    // if (event.storageArea === localStorage) {}
    if (event.key === 'logout-event') { // 假设写入 localStorage 的登出事件的 key 是 logout-event
        // ..
    }
}

参考

How user will Logout from all open tabs automatically when user logs out in one of them