vue后台管理系统，两个页面登录两个账号，后一个账号的token信息会覆盖前一个账号

场景

在同一浏览器，登录同一个系统，打开两个标签页（A、B），登录相同角色权限的账号，会出现后来登录（B）的token覆盖先登录（A）的token。

从而导致如下问题：

问题一：A页面会带着B页面的token信息去请求后台，但页面显示的还是之前权限角色范围内的信息，这样是有问题的，按道理，原来的页面应该变成后面登录角色的权限范围内应该展示的页面及内容。
问题二：B页面登出后token会被清除（后端也会清除），从而导致A页面请求报错。

解决方案：

在App.vue中加入以下代码：

created() {
      const vm = this;
      document.addEventListener("visibilitychange", function () {
        if (vm.$store.getters.userToken != localStorage.getItem("userToken")) {
          location.reload();
        }
      });
    },

就简单的几行代码就可以解决掉这个问题了，这段代码我写到了App.vue文件里。主要用到 visibilitychange 事件监听，当点击切换标签页时会触发。此时，用本地的的token和vuex的store里的token进行比较，如果不一样，则进行刷新页面操作。这样就可以成功解决掉这个问题了，简单又实用。

如果觉得对你有帮助~可以点个赞，鼓励鼓励作者哟！