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

JavaScript localStorage Session 大约 621 字

场景

  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

阅读 168 · 发布于 2021-05-29

————        END        ————

扫描下方二维码关注公众号和小程序↓↓↓

扫描二维码关注我
昵称:
随便看看 换一批