场景： 同一浏览器，登陆账号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
export default {
namespaced: true,
state: {
tokenInfo: '',
},
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' })
}
})
}
以上是比较通用的方法。 但是我的测试，特别喜欢点浏览器的刷新键，那么就会遇到问题，存储到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'))
},
以上基本上算是解决了同一浏览器只允许同时登录一个账号的问题。
但是每个项目都有独特的业务逻辑，我这边后续涉及到，点击页面按钮，打开新的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: {
}
}
这个方法更为简洁，代码量还少。
真是项目上的使用，代码：
原文链接：vue同一浏览器只允许同时登录一个账号的解决办法-真实项目使用