【vue】前端无感刷新token的一种方式

---

前言

新系统的token 过期时间只有两小时，频繁退出登录对用户感知不太好，所以需要进行刷新token的操作。

---

一、思路

利用登录时间进行与当前时间进行比较，我这边设置的是一小时到两小时之间，有操作就执行刷新token的方法

二、使用步骤

1.记录登录时间

代码如下（示例）：

login({ commit }, userInfo) {
    return new Promise((resolve, reject) => {
      login(userInfo)
        .then((response) => {
          const { data } = response;
          if (response.code === 200) {
            let logintime = new Date().getTime();
            localStorage.setItem("loginTime", logintime);  // 将登录时间记录在浏览器
            ...
            resolve(data);
          } else {
            reject(response.msg);
          }
        })
        .catch((error) => {
          reject(error);
        });
    });
  },

2. 将登录时间与当前时间进行比较(重要)

这里是主要实现的代码
App.vue 监听点击事件，获取浏览器存储的loginTime,获取当前操作时间进行比较，
存在loginTime时，将它与当前操作时间进行比较，设置超过一个小时就进行token刷新，且两个小时没有进行操作就会被退出登录。

代码如下（示例）：

App.vue

const twoHour = 1000 * 60 * 60 * 2;
const oneHour = 1000 * 60 * 60;
let isReresh = false;  // 防止连续多次请求

created() {
    let that = this;
    window.addEventListener(
      "click",
      (e) => {
        if (this.$route.path != "/") {
          let logintime = localStorage.getItem("loginTime");
          let now = new Date().getTime();
          if (logintime) {
            let calcTime = now - Number(logintime);
            // console.log(calcTime)
            // 两小时内刷新token
            if ((calcTime < twoHour) && (calcTime > oneHour) && !isReresh) {
              console.log(calcTime);
              isReresh = true;
              that.$store
                .dispatch("user/resetToken")
                .then((res) => {
                  console.log("token", res);
                  isReresh = false;
                })
                .catch(() => {
                  isReresh = false;
                });
            }
          }
        }
      },
      true
    );
  },

重新获取token之后要更新登录时间

resetToken 方法

resetToken({ commit }) {
    return new Promise((resolve) => {
      resetToken()
        .then((response) => {
          let logintime = new Date().getTime();
          localStorage.setItem("loginTime", logintime); 
          ...
          resolve(data);
        })
        .catch((error) => {
          reject(error);
        });
    });
  },

退出登录也要记得清掉登录时间，之前忘记清掉了，退出登录浏览器仍然记录了loginTime，导致一直进行比较一致在刷新token，登录不进去

logout({ commit, state, dispatch }) {
    return new Promise((resolve, reject) => {
     logout(state.token).then(() => {
      ...
      localStorage.removeItem("loginTime");
      ...
      resolve();
       }).catch(error => {
         reject(error)
       })
    });
  },

---

总结

无感刷新token是写管理系统比较常见的功能，但是因为我这边后端并没有给我传一个refresh_token参数，所以没办法用拦截状态码来进行token刷新，目前只想到了在App.vue或者main.js进行全局的设置。同事说可以在每次请求发起是进行拦截，但是目前没有想到实现方式，希望哪位大佬给点意见😂