vue-admin-template后台管理系统在页面刷新后MenuBar显示异常

问题重现：

在利用Vue-Router根据权限动态显示导航栏实现MenuBar的动态显示后，出现了一个问题：
每当页面刷新后,MenuBar就会显示异常。经排查，发现是由于vuex中store保存的数据，刷新页面之后被清空，MenuBar无法获取到当前的用户权限导致。

针对上述问题的解决方案：将state中的数据放入浏览器会话存储空间（sessionStorage）

Step1：更改state的获取方式

state: sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) : {
    device: "",// 当前登录设备
    signed_id: 0,// 当前登录人员id
    signed_authorize: "",// 当前登录人员权限
    patent_id: 0,// 待查看的专利id
  },

Step2：在进行登录校验后，将当前权限写入state，然后存入sessionStorage

// 教师权限
this.get_autorize("教师");
sessionStorage.setItem("state", JSON.stringify(this.$store.state));

Step3：在App.vue中监听浏览器刷新

import store from "@/store";

export default {
  name: "App",
  mounted() {
    window.addEventListener("unload", this.saveState);
  },
  methods: {
    saveState() {
      sessionStorage.setItem("state", JSON.stringify(this.$store.state));
    },
  },
};