不同标签页同步用户登录状态
JavaScript localStorage Session About 621 words场景
- 用户
A
在标签页1
中登录; - 打开标签页
2
,退出登录并登录用户B
; - 切换回标签页
1
,此时从后端获取的数据都为用户B
的信息;
说明
因为都是用户自己操作不同账户进行登录登出,此问题仅需前端逻辑控制即可。
解决方法
方法一
- 在退出登录时在
localStorage
中写入相关字段标识已经退出登录了。 - 监听
window.onfucus
事件,当切换回标签页时,判断localStorage
是否有退出登录相关的字段,有就将页面重定向到登录页。
方法二
- 在退出登录时在
localStorage
中写入相关字段标识已经退出登录了。 - 监听
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
Views: 2,117 · Posted: 2021-05-28
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb/LiteNote扫描下方二维码关注公众号和小程序↓↓↓
Loading...