快捷導(dǎo)航

vue同一個瀏覽器登錄不同賬號數(shù)據(jù)覆蓋問題解決方案

更新時間：2024年01月19日 11:45:03 作者：前端搬磚達人

同一個瀏覽器登錄不同賬號session一致,這就導(dǎo)致后面登錄的用戶數(shù)據(jù)會把前面登錄的用戶數(shù)據(jù)覆蓋掉,這個問題很常見,當前我這邊解決的就是同一個瀏覽器不同窗口只能登錄一個用戶,對vue同一個瀏覽器登錄不同賬號數(shù)據(jù)覆蓋問題解決方法感興趣的朋友一起看看吧

1、在App.vue中監(jiān)聽本地數(shù)據(jù)，并監(jiān)聽，如果賬號不一致則刷新

這里使用storage監(jiān)聽本地數(shù)據(jù) ，首先在登錄后把數(shù)據(jù)存入本地，這里我用的是sessionStorage和localStorage中的數(shù)據(jù)做對比，因為localStorage數(shù)據(jù)是可共享的，如果不一致則刷新

 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、對詳情頁面做頁面訪問失效處理

有些時候用戶點進詳情頁，刷新時出現(xiàn)彈窗提示用戶當前頁面已丟失，點擊跳回首頁即可
1、首先定義一個彈窗組件，這里我就不寫了
2、在home.vue組件中引入
3、vuex中定義一個屬性控制TrialDialog.vue彈窗組件的顯示和隱藏
4、在監(jiān)聽數(shù)據(jù)不一致時更新vuex中的數(shù)據(jù)即可
App.vue

 checkNameExpired() {
      let newUser = localStorage.getItem('newUserName')
      let user = sessionStorage.getItem('userName')
      // 登錄不同賬號刷新后失效頁面路由名稱
      let routeName = [需要顯示彈窗的路由名字數(shù)組]
      if (newUser && user && newUser != user) {
        console.log('頁面刷新');  
        //如果是類似運單詳情等頁面，則彈窗提示跳轉(zhuǎn)到首頁
        if (routeName.includes(this.$route.name)) {
          this.$store.dispatch("updateIsChangeRouter", true);   
        }
        //頁面刷新
        this.$router.go(0);
      }
    },

2.1這里還有一個問題，就是彈窗只在內(nèi)容區(qū)塊，如果點擊左邊菜單路由，彈窗不應(yīng)該在，目前是還在，所以我在路由前置中判斷，如果切換的路由不在彈窗里邊的頁面，則更新屬性

router.beforeEach((to, from, next) => {
  let routeName = [需要顯示彈窗的路由名字數(shù)組]
  if (!routeName.includes(to.name)) {
    // 在路由切換時隱藏彈窗
    if (JSON.parse(sessionStorage.getItem('isShowChangeRouter')) == true) {
      store.dispatch("clearChangeRouter", false);
    }
  }
  next();
});

到此這篇關(guān)于vue同一個瀏覽器登錄不同賬號數(shù)據(jù)覆蓋問題解決的文章就介紹到這了,更多相關(guān)vue數(shù)據(jù)覆蓋內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: