公司有网站域名 如何做网站,传媒公司做网站编辑 如何,自适应企业网站,塑料模板厂 塑料模板生产厂家同一个浏览器登录不同账号session一致#xff0c;这就导致后面登录的用户数据会把前面登录的用户数据覆盖掉#xff0c;这个问题很常见#xff0c;当前我这边解决的就是同一个浏览器不同窗口只能登录一个用户#xff0c;解决方案如下#xff1a; 1、在App.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(); }); 这样就可以了欢迎大佬们有更好的办法可以分享