目录
需求
当 token 过期的时候,刷新 token,前端需要做到无感刷新 token,即刷 token 时要做到用户无感知,避免频繁登录。实现思路
方法一
后端返回过期时间,前端判断 token 过期时间,去调用刷新 token 接口
缺点:需要后端额外提供一个 token 过期时间的字段;使用了本地时间判断,若本地时间被篡改,特别是本地时间比服务器时间慢时,拦截会失败。
方法二
写个定时器,定时刷新 token 接口
缺点:浪费资源,消耗性能,不建议采用。
方法三
在响应拦截器中拦截,判断 token 返回过期后,调用刷新 token 接口
实现
axios 的基本骨架,利用 service.interceptors.response 进行拦截
import axios from "axios";
service.interceptors.response.use(
(response) => {
if (response.data.code === 409) {
return refreshToken({
refreshToken: localStorage.getItem("refreshToken"),
token: getToken(),
})
.then((res) => {
const { token } = res.data;
setToken(token);
response.headers.Authorization = `${token}`;
})
.catch((err) => {
removeToken();
router.push("/login");
return Promise.reject(err);
});
}
return response && response.data;
},
(error) => {
Message.error(error.response.data.msg);
return Promise.reject(error);
}
);
问题解决
问题一:如何防止多次刷新 token
import axios from "axios";
// 是否正在刷新的标记
let isRefreshing = false;
service.interceptors.response.use(
(response) => {
if (response.data.code === 409) {
if (!isRefreshing) {
isRefreshing = true;
return refreshToken({
refreshToken: localStorage.getItem("refreshToken"),
token: getToken(),
})
.then((res) => {
const { token } = res.data;
setToken(token);
response.headers.Authorization = `${token}`;
})
.catch((err) => {
removeToken();
router.push("/login");
return Promise.reject(err);
})
.finally(() => {
isRefreshing = false;
});
}
}
return response && response.data;
},
(error) => {
Message.error(error.response.data.msg);
return Promise.reject(error);
}
);
问题二:同时发起两个或者两个以上的请求时,其他接口怎么解决
当第二个过期的请求进来,token 正在刷新,先将这个请求存到一个数组队列中,想办法让这个请求处于等待中,一直等到刷新 token 后再逐个重试清空请求队列。那么如何做到让这个请求处于等待中呢?为了解决这个问题,得借助 Promise。将请求存进队列中后,同时返回一个 Promise,让这个 Promise 一直处于 Pending 状态(即不调用 resolve),此时这个请求就会一直等啊等,只要不执行 resolve,这个请求就会一直在等待。当刷新请求的接口返回来后,再调用 resolve,逐个重试。最终代码:
import axios from "axios";
// 是否正在刷新的标记
let isRefreshing = false;
//重试队列
let requests = [];
service.interceptors.response.use(
(response) => {
//约定code 409 token 过期
if (response.data.code === 409) {
if (!isRefreshing) {
isRefreshing = true;
//调用刷新token的接口
return refreshToken({
refreshToken: localStorage.getItem("refreshToken"),
token: getToken(),
})
.then((res) => {
const { token } = res.data;
// 替换token
setToken(token);
response.headers.Authorization = `${token}`;
// token 刷新后将数组的方法重新执行
requests.forEach((cb) => cb(token));
requests = []; // 重新请求完清空
return service(response.config);
})
.catch((err) => {
//跳到登录页
removeToken();
router.push("/login");
return Promise.reject(err);
})
.finally(() => {
isRefreshing = false;
});
} else {
// 返回未执行 resolve 的 Promise
return new Promise((resolve) => {
// 用函数形式将 resolve 存入,等待刷新后再执行
requests.push((token) => {
response.headers.Authorization = `${token}`;
resolve(service(response.config));
});
});
}
}
return response && response.data;
},
(error) => {
Message.error(error.response.data.msg);
return Promise.reject(error);
}
);
注意事项:
要注意的一点是,实际应用时,要注意:
- 刷新 token 时如果调接口,所使用的网络请求工具不能也使用这个封装的工具,否则就会陷入无限循环,可以使用简单未封装的方式请求。
- 本例使用的方法,是进行请求前刷新 token。也可以使用先调网络请求,如果接口返回错误码表示 token 过期,则刷新 token,再重新请求的方式。