vue同一个浏览器登录不同账号数据覆盖问题解决方案
作者：前端搬砖达人
同一个浏览器登录不同账号session一致,这就导致后面登录的用户数据会把前面登录的用户数据覆盖掉,这个问题很常见,当前我这边解决的就是同一个浏览器不同窗口只能登录一个用户,对vue同一个浏览器登录不同账号数据覆盖问题解决方法感兴趣的朋友一起看看吧
同一个浏览器登录不同账号session一致，这就导致后面登录的用户数据会把前面登录的用户数据覆盖掉，这个问题很常见，当前我这边解决的就是同一个浏览器不同窗口只能登录一个用户，解决方案如下：
1、在App.vue中监听本地数据，并监听，如果账号不一致则刷新
这里使用storage监听本地数据 ，首先在登录后把数据存入本地，这里我用的是sessionStorage和localStorage中的数据做对比，因为localStorage数据是可共享的，如果不一致则刷新
mounted() {
window.addEventListener('storage', () => this.checkNameExpired());
},
destroyed() {
window.removeEventListener("storage", () => this.checkNameExpired());
},
methods: {
checkNameExpired() {
let newUser = localStorage.getItem('newUserName')
let user = sessionStorage.getItem('userName')
//旧和新用户账号都存在时才需要刷新，防止管理端页面也会刷新
if (newUser && user && newUser != user) {
console.log('页面刷新');
//页面刷新
this.$router.go(0);
}
},2、对详情页面做页面访问失效处理
有些时候用户点进详情页，刷新时出现弹窗提示用户当前页面已丢失，点击跳回首页即可
1、首先定义一个弹窗组件，这里我就不写了
2、在home.vue组件中引入
3、vuex中定义一个属性控制TrialDialog.vue弹窗组件的显示和隐藏
4、在监听数据不一致时更新vuex中的数据即可
App.vue
checkNameExpired() {
let newUser = localStorage.getItem('newUserName')
let user = sessionStorage.getItem('userName')
// 登录不同账号刷新后失效页面路由名称
let routeName = [需要显示弹窗的路由名字数组]
if (newUser && user && newUser != user) {
console.log('页面刷新');
//如果是类似运单详情等页面，则弹窗提示跳转到首页
if (routeName.includes(this.$route.name)) {
this.$store.dispatch("updateIsChangeRouter", true);
}
//页面刷新
this.$router.go(0);
}
},2.1这里还有一个问题，就是弹窗只在内容区块，如果点击左边菜单路由，弹窗不应该在，目前是还在，所以我在路由前置中判断，如果切换的路由不在弹窗里边的页面，则更新属性
router.beforeEach((to, from, next) => {
let routeName = [需要显示弹窗的路由名字数组]
if (!routeName.includes(to.name)) {
// 在路由切换时隐藏弹窗
if (JSON.parse(sessionStorage.getItem('isShowChangeRouter')) == true) {
store.dispatch("clearChangeRouter", false);
}
}
next();
});到此这篇关于vue同一个浏览器登录不同账号数据覆盖问题解决的文章就介绍到这了,更多相关vue数据覆盖内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！