使用axios结合access_token和refresh_token进行无感刷新

2024-03-05 14:04

本文主要是介绍使用axios结合access_token和refresh_token进行无感刷新,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

这里利用到的主要是 axios 请求失败的config配置可以记住本次请求的参数,以及利用拦截器,等待刷新完后通过 axios(config) 再次发起请求。
小技巧:将每次请求失败的config和promise的resolve参数存放到数组中,等待刷新token完成再次请求

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import axios, { type InternalAxiosRequestConfig } from 'axios'
import { ref } from 'vue'let isRefreshing = false // 标志是否正在刷新token
let requestQueue: { config: InternalAxiosRequestConfig; resolve: any }[] = [] // 存放token失效的请求配置的promise的resolve方法axios.interceptors.request.use((config) => {config.headers.Authorization = 'bearer ' + localStorage.getItem('access_token') || '' //拦截器添加token请求头return config
})
axios.interceptors.response.use((res) => {return res},async (err) => {const { config, response } = errif (response.status == 401 && !config.url.endsWith('/login')) {// eslint-disable-next-line no-async-promise-executorreturn new Promise(async (resolve) => {requestQueue.push({ config, resolve }) // accessToken失效后并发请求时,都会失败,把所有的config存起来,刷新完token再请求if (isRefreshing) {return}isRefreshing = trueawait refreshToken() // 使用refreshToken拿到新的有效的accessToken和refreshToken,存放到loalStorage中isRefreshing = falsefor (const { resolve, config } of requestQueue) {resolve(axios(config)) //这里请求失败拿到请求的config,才能重发请求}})}return Promise.reject(err)}
)const refreshToken = async () => {const { data } = await axios.get('http://localhost:3000/refreshToken', {params: {refresh_token: localStorage.getItem('refresh_token')}})if (data.accessToken && data.refreshToken) {localStorage.setItem('access_token', data.accessToken)localStorage.setItem('refresh_token', data.refreshToken)}
}const testData1 = ref()
const testData2 = ref()const query = async () => {axios.get('http://localhost:3000/test1').then((res) => {testData1.value = res.data})axios.get('http://localhost:3000/test2').then((res) => {testData2.value = res.data})
}const login = async () => {const { data } = await axios.get('http://localhost:3000/login')localStorage.setItem('access_token', data.accessToken)localStorage.setItem('refresh_token', data.refreshToken)
}
</script><template><button @click="login">登录</button><button @click="query()">请求</button><div><h1>{{ testData1 }}</h1><h1>{{ testData2 }}</h1></div>
</template><style scoped></style>

这篇关于使用axios结合access_token和refresh_token进行无感刷新的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/776745

相关文章

Linux使用fdisk进行磁盘的相关操作

《Linux使用fdisk进行磁盘的相关操作》fdisk命令是Linux中用于管理磁盘分区的强大文本实用程序,这篇文章主要为大家详细介绍了如何使用fdisk进行磁盘的相关操作,需要的可以了解下... 目录简介基本语法示例用法列出所有分区查看指定磁盘的区分管理指定的磁盘进入交互式模式创建一个新的分区删除一个存

C#使用HttpClient进行Post请求出现超时问题的解决及优化

《C#使用HttpClient进行Post请求出现超时问题的解决及优化》最近我的控制台程序发现有时候总是出现请求超时等问题,通常好几分钟最多只有3-4个请求,在使用apipost发现并发10个5分钟也... 目录优化结论单例HttpClient连接池耗尽和并发并发异步最终优化后优化结论我直接上优化结论吧,

SpringBoot使用Apache Tika检测敏感信息

《SpringBoot使用ApacheTika检测敏感信息》ApacheTika是一个功能强大的内容分析工具,它能够从多种文件格式中提取文本、元数据以及其他结构化信息,下面我们来看看如何使用Ap... 目录Tika 主要特性1. 多格式支持2. 自动文件类型检测3. 文本和元数据提取4. 支持 OCR(光学

JAVA系统中Spring Boot应用程序的配置文件application.yml使用详解

《JAVA系统中SpringBoot应用程序的配置文件application.yml使用详解》:本文主要介绍JAVA系统中SpringBoot应用程序的配置文件application.yml的... 目录文件路径文件内容解释1. Server 配置2. Spring 配置3. Logging 配置4. Ma

Linux使用dd命令来复制和转换数据的操作方法

《Linux使用dd命令来复制和转换数据的操作方法》Linux中的dd命令是一个功能强大的数据复制和转换实用程序,它以较低级别运行,通常用于创建可启动的USB驱动器、克隆磁盘和生成随机数据等任务,本文... 目录简介功能和能力语法常用选项示例用法基础用法创建可启动www.chinasem.cn的 USB 驱动

C#使用yield关键字实现提升迭代性能与效率

《C#使用yield关键字实现提升迭代性能与效率》yield关键字在C#中简化了数据迭代的方式,实现了按需生成数据,自动维护迭代状态,本文主要来聊聊如何使用yield关键字实现提升迭代性能与效率,感兴... 目录前言传统迭代和yield迭代方式对比yield延迟加载按需获取数据yield break显式示迭

使用SQL语言查询多个Excel表格的操作方法

《使用SQL语言查询多个Excel表格的操作方法》本文介绍了如何使用SQL语言查询多个Excel表格,通过将所有Excel表格放入一个.xlsx文件中,并使用pandas和pandasql库进行读取和... 目录如何用SQL语言查询多个Excel表格如何使用sql查询excel内容1. 简介2. 实现思路3

java脚本使用不同版本jdk的说明介绍

《java脚本使用不同版本jdk的说明介绍》本文介绍了在Java中执行JavaScript脚本的几种方式,包括使用ScriptEngine、Nashorn和GraalVM,ScriptEngine适用... 目录Java脚本使用不同版本jdk的说明1.使用ScriptEngine执行javascript2.

c# checked和unchecked关键字的使用

《c#checked和unchecked关键字的使用》C#中的checked关键字用于启用整数运算的溢出检查,可以捕获并抛出System.OverflowException异常,而unchecked... 目录在 C# 中,checked 关键字用于启用整数运算的溢出检查。默认情况下,C# 的整数运算不会自

在MyBatis的XML映射文件中<trim>元素所有场景下的完整使用示例代码

《在MyBatis的XML映射文件中<trim>元素所有场景下的完整使用示例代码》在MyBatis的XML映射文件中,trim元素用于动态添加SQL语句的一部分,处理前缀、后缀及多余的逗号或连接符,示... 在MyBATis的XML映射文件中,<trim>元素用于动态地添加SQL语句的一部分,例如SET或W