（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)
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

store/modules/token.js

export default {
  namespaced: true,
  state: {
    tokenInfo: '',
  },
  mutations: {
    setTokenInfo(state, data) {
      state.tokenInfo = data
    }
  },
  actions: {},
  getters: {}
}
1
2
3
4
5
6
7
8
9
10
11
12
13

App.vue文件

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

以上是比较通用的方法。 但是我的测试，特别喜欢点浏览器的刷新键，那么就会遇到问题，存储到vuex中的数据，在浏览器刷新键的时候，数据将会丢失。这里就涉及到刷新浏览器vuex数据丢失的问题了。
但是因为我用了比较偷懒的方式：我不在登录页面塞 token数据到vuex，我再layout/navbar中设置
this.$store.commit(‘token/setTokenInfo’, Cookies.get(‘yi-token’))

 mounted(){
     // 点击浏览器刷新按钮，重新提交token给到vuex
    this.$store.commit('token/setTokenInfo', Cookies.get('yi-token'))
  },
1
2
3
4

以上基本上算是解决了同一浏览器只允许同时登录一个账号的问题。

但是每个项目都有独特的业务逻辑，我这边后续涉及到，点击页面按钮，打开新的tab栏查看报告，这里涉及到打开新的tab页面vuex数据丢失的问题。
我是这样处理的，在新打开的页面mounted里面this.$store.commit(‘token/setTokenInfo’, Cookies.get(‘yi-token’))即可。

再次更新：vuex中token丢失的情况： 1. 点击浏览器刷新键。 2. 打开新的tab标签页（项目中的查看报告业务）。 现在发现一个更简单有效的办法， 在 store/modules/token.js文件中给state中的tokenInfo 设置默认值（从cookeis中获取token）。

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

  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

这个方法更为简洁，代码量还少。
真是项目上的使用，代码：
原文链接：vue同一浏览器只允许同时登录一个账号的解决办法-真实项目使用