业务场景
后台管理系统有不同的角色权限,不同账号的角色权限不同登录之后看到的页面也是不一样的,当我们用同一个浏览器登录一个账号A之后,再打开一个新的tab标签页重新登录一个不同于账号A角色权限的账号B之后,浏览器中A的token被B覆盖,导致A账号提交数据时候可能会出现后台误以为是B账号进行的一些操作,从而导致后台数据保存出现匹配错误的bug
解决方案
一、vue中新建一个全局变量用来保存当前用户token
新建一个constants.js文件
/**
* 全局变量定义
*/
export let global = {
"token": ''
}
把token保存到localstorage的同时也保存一份到当前vue的全局变量中
import {global} from '@/utils/constant'
global.token = res.data.token // 赋值给全局变量
二、App.vue中
mounted() {
document.addEventListener('visibilitychange', this.checkNameExpired);
},
beforeDestroy() {
document.removeEventListener('visibilitychange', this.checkNameExpired);
},
methods: {
checkNameExpired() {
console.log(global.token)
if (document.hidden == false && global.token != getToken()) {
global.token= getToken() //当前登录的用户信息与全局存的用户信息不同,覆盖新的用户信息,否则是最初设的值
// 这里样式可以根据项目优化,刷新页面
window.location.reload();
}
}
}
这样子就可以实现直接同一浏览器不同tab标签页登录不同账号时候避免数据的相互污染干扰了,说白了就是一个浏览器同时只能允许一个账号的在线。
1374

被折叠的 条评论
为什么被折叠?



