ts 联合react 实现ajax的封装,refreshtoken的功能

news/2024/11/14 12:18:09/

react ts混合双打,实现ajax的封装,以及401的特殊处理

import axios from 'axios'
import {AMDIN_EXPIRES_KEY,AMDIN_KEY,AMDIN_REFRESH_EXPIRES_KEY,AMDIN_REFRESH_KEY,COMMID_KEY,getToken,removeToken
} from '../utils/user-token'
import { showMessage } from '../utils/feedback'
import { fetchGetRefreshInfo } from './user'
import { setUserToken } from '../utils/public'
import router from '../router'// 失败的fetch 集合
let isRefreshing = false
let failedQueue: any[] = []// 创建一个axios实例
const instance = axios.create()// 添加请求拦截器
instance.interceptors.request.use((config: any) => {// 在发送请求之前做些什么const token = getToken(AMDIN_KEY)// if (token) {// config.headers.Authorization = `Bearer ${token}` // 将token设置到请求头中config.headers = {Authorization: `Bearer ${token}`,...config.headers}// }return config},(error) => {// 对请求错误做些什么return Promise.reject(error)}
)// 添加响应拦截器
instance.interceptors.response.use(async (res) => {const resData = (res.data || {}) as ResType// console.log('response - resData: ', resData)const { code, msg = '系统正在升级,稍后再试' } = resDataif ((code) === 200) {return Promise.resolve(resData as any)} else {await showMessage(msg).then(() => {return Promise.reject(resData)})}},async (error) => {// 对响应错误做点什么// if (error.response && error.response.status === 401) {//   // 判断是否为401//   const refreshToken = getToken(AMDIN_REFRESH_KEY)//   if (refreshToken) {//     try {//       // 使用refreshToken请求新的token//       const res = await fetchGetRefreshInfo()//       // 将新的token保存到localStorage//       setUserToken(res.Data.token)//       // 用新的token重新发送失败的请求//       const config = error.config//       config.headers.Authorization = `Bearer ${getToken(AMDIN_KEY)}`//       return instance(config)//     } catch (err) {//       console.error('刷新token失败', err)//       // 刷新token失败,跳转到登录页等处理//       router.navigate(`/login?commId=${getToken(COMMID_KEY)}`, {//         replace: true//       })//     }//   }// }if (error.response && error.response.status === 401) {// 特殊处理 当RefreshToken 的接口401时候,及RefreshToken token的也过期了// 如果不处理,将会死循环if (error.response.config.url.indexOf('RefreshToken') > -1) {// 刷新token失败,跳转到登录页等处理removeToken(AMDIN_KEY)removeToken(AMDIN_EXPIRES_KEY)removeToken(AMDIN_REFRESH_EXPIRES_KEY)removeToken(AMDIN_REFRESH_KEY)router.navigate(`/login?commId=${getToken(COMMID_KEY)}`, {replace: true})return}const originalRequest = error.configif (!isRefreshing) {isRefreshing = trueawait fetchGetRefreshInfo().then((res) => {// 将新的token保存到localStoragesetUserToken(res.Data.token)isRefreshing = falseconst newToken = getToken(AMDIN_KEY)processQueue(null, newToken)originalRequest.headers['Authorization'] = 'Bearer ' + newTokenreturn instance(originalRequest)}).catch((err) => {processQueue(err, null)return Promise.reject(err)})} else {return new Promise(function (resolve, reject) {failedQueue.push({ resolve, reject })}).then((token) => {originalRequest.headers['Authorization'] = 'Bearer ' + tokenreturn instance(originalRequest)}).catch((err) => {return Promise.reject(err)})}}return Promise.reject(error)}
)const processQueue = (error: any, token: string | null = null) => {failedQueue.forEach((prom) => {if (error) {prom.reject(error)} else {prom.resolve(token)}})failedQueue = []
}export default instanceexport type ResType = {code?: numberdata?: ResDataTypemsg?: string
}export type ResDataType = {[key: string]: any
}
  • service.ts
// 刷新token
export async function fetchGetRefreshInfo(): Promise<ResDataType> {const url = `${REACT_APP_URL}/XXXXXXXXXXXXXXXXX/RefreshToken`return axios({url,method: 'post',headers: {Authorization: `Bearer ${refreshToken}`}})
}

http://www.ppmy.cn/news/1229980.html

相关文章

力扣-414.第三大的数(两种解法)

文章目录 第三大的数解法一&#xff08;排序加遍历对比&#xff09;解法二&#xff08;遍历一遍加迭代&#xff09; 第三大的数 题目&#xff1a; 给你一个非空数组&#xff0c;返回此数组中第三大的数 。如果不存在&#xff0c;则返回数组中最大的数。 示例 1&#xff1a; 输…

【双指针】快乐数

快乐数 文章目录 快乐数01 题目详细02 算法原理快慢指针 03 代码Java代码;C代码 01 题目详细 202. 快乐数 编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。然后重复这…

STM32获取最大堆栈空间

参考 stackflow相关讨论 原理 通过参考链接&#xff0c;可知探测Stack的最大深度是先在stack中填充不常用的特定值&#xff0c;然后实时检测这些值哪些发生了变化&#xff0c;变化的表示使用到了这个空间&#xff0c;如果程序完全遍历后&#xff0c;有些值还是没变&#xff…

Hibernate 函数 ,子查询 和原生SQL查询

一. 函数 聚合函数&#xff1a;count(),avg(),sum(),min(),max() 例&#xff1a;&#xff08;1&#xff09;查询Dept表中的所有的记录条数。 String hql" select count(*) from Dept "; Long count(Long)session.createQuery(hql).uniqueResult(); 当不确定返回的是…

IObit Unlocker丨解除占用程序软件

更多内容请收藏&#xff1a;https://rwx.tza-3.xyz 官网&#xff1a;IObit Unlocker “永远不用担心电脑上无法删除的文件。” 界面简单&#xff0c;支持简体中文&#xff0c;一看就会&#xff0c;只需要把无法删除/移动的文件或整个U盘拖到框里就行。 解锁率很高&#xff0c;…

PC3329L DC-DC降压 10V-100V输入3A大流输出带EN功能实现零功耗只需极少元器件

1. PC3392L特性  通过使能脚关断实现零功耗  宽电压输入范围 10V 至 100V  最大输出电流 3A  集成功率 MOS 管  外围器件少  输出短路保护  温度保护  逐周期限流  输出电压灵活可靠  ESOP8 2. 描述 PC3392L 一款宽电压范围降压型 DC-DC 电源管…

HTTP四种请求方式,状态码,请求和响应报文

1.get请求 一般用于获取数据请求参数在URL后面请求参数的大小有限制 2.post请求 一般用于修改数据提交的数据在请求体中提交数据的大小没有限制 3.put请求 一般用于添加数据 4.delete请求 一般用于删除数据 5.一次完整的http请求过程 域名解析&#xff1a;使用DNS协议…

mysql 集群恢复

准备使用集群的时候发现集群起不来&#xff0c; 发现抱错集群各个节点都是readonly 状态&#xff0c;找了很多资料&#xff0c;由于集群处于不一致的情况需要防止不同的节点数据写入脏数据 取消节点readonly 方法如下&#xff1a; MySQL 取消 super read only 直接关闭read…