vue同一浏览器只允许同时登录一个账号的解决办法-真实项目使用

上篇文章介绍了：同一浏览器只允许同时登录一个账号的解决办法
这篇文章记录下项目中确定的最终方案。

场景： 同一浏览器，登陆账号A后，打开新的tab标签页，登陆账号B，用户A将会强制返回登陆页面；
这个场景应该很多前端小伙伴会遇到的，下面将分享下我项目中实际使用的方法；
逻辑思路： A用户登陆成功后，记录token或者id，存储到local或者cookies，同步提交token或id数据到vuex中。 新的标签页，登陆用户B，拿B的token与A用户vuex中的toekn做对比，不一致，则将A强制回登陆页面。在App.vue文件使用 document.addEventListener(‘visibilitychange’, function(){}j监听打开新的tab标签页

登陆页：

 loginValidate() {
    this.$refs['loginForm'].validate(async valid => {
      if (valid) {
        this.loading = true
        try {
          const res = await login({loginForm }))
          if (res?.data) {
           // 存储token到cookies
            this.setToken(res.data.AuthToken)
            //设置token数据给到vuex
            this.$store.commit('token/setTokenInfo', res.data.AuthToken)
          }
        } catch (error) {
        }
      } else {
        return false
      }
    })
  }

  setToken(token: string) {
    Cookies.set('yi-token', token)
  }

store/modules/token.js
注意：这里给state中的tokenInfo设置了默认值：cookies中的token，避免用户点击浏览器刷新按钮vuex数据会丢失的问题。这个处理真的太绝了，因为项目中还有一项业务逻辑：点击按打开新的tab标签页查看报告，vuex中需仍然带token的。
（vuex数据会丢失的两种情况：1，点击浏览器刷新按钮；2，打开新的tab标签页；）

import Cookies from 'js-cookie'
export default {
  namespaced: true,
  state: {
    tokenInfo: Cookies.get('yishi-token'),
  },
  mutations: {
    setTokenInfo(state, data) {
      state.tokenInfo = data
    }
  },
  actions: {},
  getters: {

  }
}

app.vue文件：

 created() {
    // 浏览器打开新的tab页，登录其他用户，当前用户强制退出
    document.addEventListener('visibilitychange', function () {
      if (store.state.token.tokenInfo != Cookies.get('yi-token')) {
        router.push({ name: 'login' })
      }
    })
  }