本文介绍了一种基于HTTP响应拦截机制的Token刷新方案。当Token过期时，通过拦截响应并自动刷新Token，确保后续API调用能正常使用。文章详细解释了如何在客户端实现这一过程，包括如何缓存待处理请求并在Token刷新成功后重新发送。
//响应拦截
service.interceptors.response.use(
response => {
if (response.data.code == 200) {
return Promise.resolve(response.data);
} else if (response.data.code == -3) {
if (!isRefreshing) {
isRefreshing = true;
// 获取旧 token
let token = sessionStorage.getItem("token");
// 刷新token
axios({
headers: {
"Content-Type": "application/x-www-form-urlencoded",
token: token
},
method: "get",
url: "/api/admin/user/refresh"
})
.then(res => {
// 重新设置token;
// console.log(res, "刷新的token");
if (res.data.code == 200) {
sessionStorage.setItem(
"token",
res.data.data.token
);
// 重新请求接口 前过期的接口
response.config.headers.token = sessionStorage.getItem(
"token"
);
response.headers.token = `${res.data.data.token}`;
// token 刷新后将数组的方法重新执行
requests.forEach(cb => cb(res.data.data.token));
requests = []; // 重新请求完清空
return service(response.config);
}
// console.log(res, "2222");
})
.catch(err => {
console.log(err);
Message("刷新token失败，请重新登录");
})
.finally(() => {
isRefreshing = false;
});
} else {
// 正在刷新token ,把后来的接口缓冲起来
return new Promise(resolve => {
// 用函数形式将 resolve 存入，等待刷新后再执行
requests.push(token => {
response.headers.token = `${token}`;
resolve(service(response.config));
console.log(response.config, "要存起来的");
});
});
}
} else {
Message({
type: "warning",
center: "true",
message: response.data.msg
});
return Promise.resolve(response);
}
return Promise.resolve(response.data);
},
error => {
return Promise.reject(error);
}
);
//但是有个问题 就是刷新token之后页面逻辑不会继续进行，不知道怎么处理
扫一扫
808
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
