Ng8023 最近的时间轴更新 Ng8023 最近的时间轴更新 |
Ng8023V2EX 第 636095 号会员，加入于 2023-06-27 16:40:12 +08:00 |
| vue3 项目 bit 和 yarn 混用, yarn 安装导致依赖丢失 程序员 • Ng8023 • 2023-07-08 12:07:58 PM |
Ng8023 最近回复了
2023-07-12 17:07:57 +08:00 回复了 bhbhxy 创建的主题 › Vue.js › axios 重发请求后数据如何重新渲染 |
个人经验给出以下方案:
----
1. 401 可以让后端包装在 200 状态内部(后端无论如何总是返回类似这样的结构), 这样就不会走到 onRejected 里面
{code:number, message?:string, data?:any}
^^--- 401 可以在这里返回
2. 拦截到 code===401 不着急返回, 根据业务处理进行处理:
a. 发广播到登录(授权)组件重新授权(假定为异步)
b. 拿到新的授权码(token), 重新发起本次请求(AxiosResponse<T>里面能获取到请求参数)
c. 注意: 要处理无限递归授权问题, 可以给定重试次数限制
----
伪代码:
service.interceptors.response.use(
(resp: AxiosResponse<vo.R>) => {
const r = resp.data;
if (r.code === 401) {
// 检测重试上限
if (++retryTimes >= MAX_RETRY_TIMES) {
return Promise.reject("授权失败");
}
// 重新获取授权码
// 拿到授权码并保存到状态管理
await reqAuth();
// 用新授权重试
return axios(resp.config);
}
// 其他逻辑
// 业务层只处理: {code:number, data?:any, message?:string} 结构
return r;
},
(err: AxiosError) => {
// 处理错误
}
)
----
1. 401 可以让后端包装在 200 状态内部(后端无论如何总是返回类似这样的结构), 这样就不会走到 onRejected 里面
{code:number, message?:string, data?:any}
^^--- 401 可以在这里返回
2. 拦截到 code===401 不着急返回, 根据业务处理进行处理:
a. 发广播到登录(授权)组件重新授权(假定为异步)
b. 拿到新的授权码(token), 重新发起本次请求(AxiosResponse<T>里面能获取到请求参数)
c. 注意: 要处理无限递归授权问题, 可以给定重试次数限制
----
伪代码:
service.interceptors.response.use(
(resp: AxiosResponse<vo.R>) => {
const r = resp.data;
if (r.code === 401) {
// 检测重试上限
if (++retryTimes >= MAX_RETRY_TIMES) {
return Promise.reject("授权失败");
}
// 重新获取授权码
// 拿到授权码并保存到状态管理
await reqAuth();
// 用新授权重试
return axios(resp.config);
}
// 其他逻辑
// 业务层只处理: {code:number, data?:any, message?:string} 结构
return r;
},
(err: AxiosError) => {
// 处理错误
}
)
Select Language