前言
新系统的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进行全局的设置。同事说可以在每次请求发起是进行拦截,但是目前没有想到实现方式,希望哪位大佬给点意见😂