vue同一个浏览器登录不同账号数据覆盖问题解决

最新推荐文章于 2024-06-19 10:24:47 发布

前端搬砖达人

最新推荐文章于 2024-06-19 10:24:47 发布

阅读量1.4k

点赞数 7

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/wyq12138/article/details/135644837

版权

本文讲述了如何在Vue应用中处理浏览器不同窗口登录不同账号时，避免数据冲突的问题，包括监听本地存储、详情页面失效处理以及使用Vuex管理和路由前置判断弹窗显示。

摘要由CSDN通过智能技术生成

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