同一个浏览器登录不同账号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();
});
