vue后台系统 同一浏览器登录多个账号，token覆盖问题方案

场景：

        我使用的若依的框架，用户在同一个浏览器上可能会开多个标签 登录多个账号去进行操作数据，但是第二个登录的账号的token 会覆盖掉第一个的账号token，，在原有页面如果没有用户不注意看的话，可能会以为还是之前的账号，但我们程序是会带着第二个token去请求数据的。两个token的权限可能是不同的，所以可能会有问题。

解决方案：

        这段代码是写在App.vue的 created()里的

        ↓   

let _this = this;
    // 当前页面可见度发生变化时触发（切换标签页或最小化窗口）
    document.addEventListener("visibilitychange", function () {
      // 用本地的cookie里的token和vuex的store里的token进行比较
      if (
        _this.$store.getters.token != getToken() &&
        _this.$route.path !== "/login"
      ) {
        _this
          .$confirm(
            "当前页面下有其他账号在不同设备、浏览器或选项卡发生了登录操作。请刷新以同步至最新登录账号，或切换其他账号登录。",
            "登录账号发生变更",
            {
              confirmButtonText: "刷新页面",
              cancelButtonText: "登录其他账号",
              type: "",
              showClose: false,
            }
          )
          .then(() => {
            location.reload();
          })
          .catch(() => {
            // 退出登录，并 跳转到登录页
            _this.$store
              .dispatch("LogOut")
              .then(() => {
                location.href = process.env.VUE_APP_CONTEXT_PATH + "index";
              })
              .catch(() => {
                _this.$router.push("/login");
              });
          });
      }
    });