上篇文章介绍了：同一浏览器只允许同时登录一个账号的解决办法
这篇文章记录下项目中确定的最终方案。
场景： 同一浏览器，登陆账号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' })
}
})
}