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")