vue后台管理系统在同一浏览器登录不同权限角色cookie被覆盖刷新页面问题(简单有效！！！)

场景：

在同一浏览器，登录同一个系统，打开两个标签页，登录不同角色权限的账号，会出现先登录的cookie会被后来登录的cookie给覆盖掉。

从而导致，原来打开的页面就会带着新的token信息去请求后台，但页面显示的还是之前权限角色范围内的信息，这样是有问题的，按道理，原来的页面应该变成后面登录角色的权限范围内应该展示的页面及内容。

解决方案：

一开始，我在网上看了很多文章，但是，大多数说的都过于复杂且改动过于麻烦，有的问题都不对应，所以，最后我只能自己想办法了。下面是我的解决方案，直接上代码：

  created() {
    document.addEventListener("visibilitychange", function () {
      if (store.getters.token != getToken()) {
        location.reload();
      }
    });
  },

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

注意： getToken()是我自己封装的读取cookie的方法。这个不一定要和我这写的一样，思路一样就行。

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