当你第一次接触的时候，你有没有一个这样子的纳闷，为什么须要 refreshToken 这个货色，而不是服务器端给一个期限较长甚至永久性的 accessToken 呢？
抱着这个纳闷我在网上搜查了一番，
其实这个 accessToken 的应用期限有点像咱们生存中的入住酒店，当咱们在入住酒店时，会出示咱们的身份证明来注销获取房卡，此时房卡相当于 accessToken，能够拜访对应的房间，当你的房卡过期之后就无奈再开启房门了，此时就须要再到前台更新一下房卡，能力失常进入，这个过程也就相当于 refreshToken。
accessToken 使用率相比 refreshToken 频繁很多，如果按下面所说如果 accessToken 给定一个较长的无效工夫，就会呈现不可控的权限泄露危险。
应用 refreshToken 能够进步安全性
用户在拜访网站时，accessToken 被盗取了，此时攻击者就能够拿这个 accessToke 拜访权限以内的性能了。如果 accessToken 设置一个短暂的有效期 2 小时，攻击者能应用被盗取的 accessToken 的工夫最多也就 2 个小时，除非再通过 refreshToken 刷新 accessToken 能力失常拜访。
设置 accessToken 有效期是永恒的，用户在更改明码之后，之前的 accessToken 也是无效的
总体来说有了 refreshToken 能够升高 accessToken 被盗的危险
对于 JWT 无感刷新 TOKEN 计划（联合 axios）
业务需要
在用户登录利用后，服务器会返回一组数据，其中就蕴含了 accessToken 和 refreshToken，每个 accessToken 都有一个固定的有效期，如果携带一个过期的 token 向服务器申请时，服务器会返回 401 的状态码来通知用户此 token 过期了，此时就须要用到登录时返回的 refreshToken 调用刷新 Token 的接口（Refresh）来更新下新的 token 再发送申请即可。
话不多说，先上代码
工具
axios 作为最热门的 http 申请库之一，咱们本篇文章就借助它的谬误响应拦截器来实现 token 无感刷新性能。
具体实现
本次基于 axios-bz 代码片段封装响应拦截器
可间接配置到你的我的项目中应用 ✈️ ✈️
利用 interceptors.response，在业务代码获取到接口数据之前进行状态码 401 判断以后携带的 accessToken 是否生效。
上面是对于 interceptors.response 中异样阶段解决内容。当响应码为 401 时，响应拦截器会走中第二个回调函数 onRejected
上面代码分段可能会让大家浏览起来不是很顺畅，我间接把整份代码贴在上面，且每一段代码之间都增加了对应的正文
// 最大重发次数
const MAX_ERROR_COUNT = 5;
// 以后重发次数
let currentCount = 0;
// 缓存申请队列
const queue: ((t: string) => any)[] = [];
// 以后是否刷新状态
let isRefresh = false;
export default async (error: AxiosError<ResponseDataType>) => {
const statusCode = error.response?.status;
const clearAuth = () => {
console.log('身份过期，请从新登录');
window.location.replace('/login');
// 清空数据
sessionStorage.clear();
return Promise.reject(error);};
// 为了节俭多余的代码，这里仅展现解决状态码为 401 的状况
if (statusCode === 401) {
// accessToken 生效
// 判断本地是否有缓存有 refreshToken
const refreshToken = sessionStorage.get('refresh') ?? null;
if (!refreshToken) {clearAuth();
}
// 提取申请的配置
const {config} = error;
// 判断是否 refresh 失败且状态码 401，再次进入谬误拦截器
if (config.url?.includes('refresh')) {clearAuth();
}
// 判断以后是否为刷新状态中（避免多个申请导致屡次调 refresh 接口）if (!isRefresh) {
// 设置以后状态为刷新中
isRefresh = true;
// 如果重发次数超过，间接退出登录
if (currentCount > MAX_ERROR_COUNT) {clearAuth();
}
// 减少重试次数
currentCount += 1;
try {
const {data: { access},
} = await UserAuthApi.refreshToken(refreshToken);
// 申请胜利，缓存新的 accessToken
sessionStorage.set('token', access);
// 重置重发次数
currentCount = 0;
// 遍历队列，从新发动申请
queue.forEach((cb) => cb(access));
// 返回申请数据
return ApiInstance.request(error.config);
} catch {
// 刷新 token 失败，间接退出登录
console.log('请从新登录');
sessionStorage.clear();
window.location.replace('/login');
return Promise.reject(error);
} finally {
// 重置状态
isRefresh = false;
}
} else {
// 以后正在尝试刷新 token，先返回一个 promise 阻塞申请并推动申请列表中
return new Promise((resolve) => {
// 缓存网络申请，等 token 刷新后间接执行
queue.push((newToken: string) => {Reflect.set(config.headers!, 'authorization', newToken);
// @ts-ignore
resolve(ApiInstance.request<ResponseDataType<any>>(config));
});
});
}}
return Promise.reject(error);
};
复制代码
抽离代码
把下面对于调用刷新 token 的代码抽离成一个 refreshToken 函数，独自解决这一状况，这样子做有利于进步代码的可读性和维护性，且让看上去代码不是很臃肿
// refreshToken.ts
export default async function refreshToken(error: AxiosError<ResponseDataType>) {
/*
将下面 if (statusCode === 401) 中的代码贴进来即可，这里就不反复啦
代码仓库地址: https://github.com/QC2168/axios-bz/blob/main/Interceptors/hooks/refreshToken.ts
*/}
复制代码
通过下面的逻辑抽离，当初看下拦截器中的代码就很简洁了，后续如果要调整相干逻辑间接在 refreshToken.ts 文件中调整即可。
import refreshToken from ‘./refreshToken.ts’
export default async (error: AxiosError<ResponseDataType>) => {
const statusCode = error.response?.status;
// 为了节俭多余的代码，这里仅展现解决状态码为 401 的状况
if (statusCode === 401) {
refreshToken()}
return Promise.reject(error);
};