vuex和sessionStorage使用有感

一.vuex和sessionStorage單獨使用

1. 用戶發送登錄請求(成功)
   1. 用戶相關信息存到sessionStorage中
   2. 加載菜單狀態置爲false，存放到vuex中
   3. 跳轉到首頁(/)
2. router.beforeEach攔截
   1. 若訪問login
      1. 未認證，跳轉到login (sessionStorage是否有user)
      2. 已認證，跳轉到首頁
   2. 若訪問首頁
      1. 未認證，跳轉到login
      2. 加載動態菜單
         1. 加載動態菜單
            1. 處理嵌套頁面
            2. 判斷菜單狀態是否爲已加載，若已加載，返回，跳轉到首頁
            3. 根據用戶名向後臺請求其相應的菜單
               1. 將菜單的component轉爲路由組件，轉換好後的加入到router中
               2. 加載菜單的狀態置爲true,存放到vuex
               3. 後臺返回的菜單數據存入vuex中
            4. 根據用戶名向後臺請求其權限信息
               1. 權限信息存入到vuex中
         2. 跳轉到首頁
3. 加載主頁的信息 vuex（菜單，菜單狀態，權限信息） sessionStorage(用戶相關信息)
4. 點擊其他頁面，進入2
5. 刷新
6. 點擊其他頁面，進入2
7. 退出
   1. sessionStorage.removeItem("user")
   2. window.location.reload()
   3. 清除其他存放在sessionStorage中的數據

二.vuex和sessionStorage結合使用

同上，將存放在sessionStorage中的數據放入vuex中

5.刷新

App.vue

  created () {

      //在頁面刷新時將vuex裏的信息保存到sessionStorage裏
      window.addEventListener("beforeunload", () => {
        console.log("存vuex前的數據")
        console.log(this.$store.state,JSON.parse(sessionStorage.getItem("store")))
        
        sessionStorage.setItem("store", JSON.stringify(this.$store.state))

        console.log("存vuex後的數據")
        console.log(this.$store.state,JSON.parse(sessionStorage.getItem("store")))
      })

    // 在頁面加載時讀取sessionStorage裏的狀態信息
    if (sessionStorage.getItem("store")) {
      console.log("讀取sessionstorage前的數據")
      console.log(this.$store.state,JSON.parse(sessionStorage.getItem("store")))

      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem("store"))))

      console.log("讀取sessionstorage後的數據")
      console.log(this.$store.state,JSON.parse(sessionStorage.getItem("store")))
    }

  }

 

7.退出

      logout: function() {
        this.$confirm("確認退出嗎?", "提示", {
          type: "warning"
        }).then(() => {
            this.$store.state.tab.mainTabs=[];
            sessionStorage.removeItem("user")
            this.$router.push("/login")

            //順序不能反，且兩個中的任何一個都不能少
            window.location.reload()
            sessionStorage.setItem("store", null)

            this.$api.login.logout().then((res) => {
            }).catch(function(res) {
            }) }).catch(() => {})
      }

注意：

 window.location.reload()
 sessionStorage.setItem("store", null)

若將reload省略，會出現退出登錄後，vuex還在，這時，如果手動刷新界面，會再一次調用App裏面的created的兩段代碼，這時，sessionStorage又會出現vuex的值
若兩句話調換一下位置，和上面是一個效果，只是一個是手動刷新，一個是代碼刷新

 

執行順序：

經過測試，得到的代碼執行順序如下：
reload執行時，會跳轉到App.vue中的beforeunload，
App.vue中的beforeunload執行完成後回到reload下面的代碼，此時vuex被置爲原始值，sessionStorage被置null
執行完退出函數後，執行app.vue中的sessionStorage.getItem("store")