请求时token过期⾃动刷新token
1.在开发过程中，我们都会接触到token，token的作⽤是什么呢？了解⼀下主要的作⽤就是为了安全，⽤户登陆时，服务器会随机⽣成⼀个有时效性的token,⽤户的每⼀次请求都需要携带上token，证明其请求的合法性，服务器会验证token，只有通过验证才会返回请求结果。
2.当token失效时，现在的⽹站⼀般会做两种处理，⼀种是跳转到登陆页⾯让⽤户重新登陆获取新的token，另外⼀种就是当检测到请求失效时，⽹站⾃动去请求新的token，第⼆种⽅式在app保持登陆状态上⾯⽤得⽐较多。
3.下⾯进⼊主题，我们请求⽤的是axios，不管⽤何种请求⽅式，刷新token的原理都是⼀样的。
//封装了⼀个统⼀的请求函数，这个不是重点
export default function request(url, options) {
const token = Item('token');
const defaultOptions = {
headers: {
Authorization: `Bearer ${token}`,
},
withCredentials: true,
url: url,
baURL: BASE_URL,
};
const newOptions = { ...options, ...defaultOptions };
quest(newOptions)
.then(checkStatus)
.catch(error => console.log(error));
}
/
/ 封装了⼀个检测返回结果的函数，与后台返回状态码code === 1002表⽰token失效
let isRefreshing = true;
function checkStatus(respon) {
if (respon && de === 1002) {
// 刷新token的函数，这需要添加⼀个开关，防⽌重复请求
if(isRefreshing){
refreshTokenRequst()
}
isRefreshing = fal;
// 这个Promi函数很关键
const retryOriginalRequest = new Promi((resolve) => {
addSubscriber(()=> {无父无君
resolve(request(url, options))
一模一样的近义词
})
});
属羊的出生年份return retryOriginalRequest;
大轮船图片
打印机状态错误是怎么回事}el{
教学的英文return respon;
}
}
// 刷新token的请求函数
function refreshTokenRequst(){
let data;
普洱生茶怎么泡更好喝
const refreshToken = Item('refreshToken');
data:{
authorization: 'YXBwYXBpczpaSWxhQUVJdsferTeweERmR1praHk=',
refreshToken,
}
baURL: BASE_URL,
url:'/app/renewal',
method: 'POST',
data,
}).then((respon)=>{
localStorage.tItem('refreshToken',freshToken);
鸡肉炖什么localStorage.tItem('token',ken);
onAccessTokenFetched();
isRefreshing = true;
});
}
// Promi函数集合
let subscribers = [];
function onAccessTokenFetched() {
subscribers.forEach((callback)=>{
callback();
})
subscribers = [];
}
function addSubscriber(callback) {
subscribers.push(callback)
}
总结：其实token失效，⾃动刷新token，在页⾯只有⼀个请求的时候是⽐较好处理的，但是如果页⾯同时有多个请求，并且都会产⽣token 失效，这就需要⼀些稍微复杂的处理，解决⽅式主要是⽤了Promi 函数来进⾏处理。每⼀个token失效的请求都会存到⼀个Promi函数集合⾥⾯，当刷新token的函数执⾏完毕后，才会批量执⾏这些Promi函数，返回请求结果。还有⼀点要注意⼀下，这⼉设置⼀个刷新token 的开关isRefreshing，这个是⾮常有必要的，防⽌重复请求。
