快捷導(dǎo)航

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

更新時(shí)間：2024年01月19日 11:45:03 作者：前端搬磚達(dá)人

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

同一個(gè)瀏覽器登錄不同賬號(hào)session一致，這就導(dǎo)致后面登錄的用戶數(shù)據(jù)會(huì)把前面登錄的用戶數(shù)據(jù)覆蓋掉，這個(gè)問題很常見，當(dāng)前我這邊解決的就是同一個(gè)瀏覽器不同窗口只能登錄一個(gè)用戶，解決方案如下：

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

這里使用storage監(jiān)聽本地?cái)?shù)據(jù) ，首先在登錄后把數(shù)據(jù)存入本地，這里我用的是sessionStorage和localStorage中的數(shù)據(jù)做對(duì)比，因?yàn)閘ocalStorage數(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')
      //舊和新用戶賬號(hào)都存在時(shí)才需要刷新，防止管理端頁面也會(huì)刷新
      if (newUser && user && newUser != user) {
        console.log('頁面刷新');  
        //頁面刷新
        this.$router.go(0);
      }
    },

2、對(duì)詳情頁面做頁面訪問失效處理

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

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

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

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

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

您可能感興趣的文章: