前端无痛刷新的方案

两种方案,第一种记录登录时间,根据后台设置的token过期时间,进行在时间内请求更换token
第二种利用axios的拦截,在返回token过期时,那么token去更换token,再用新的token去请求数据。
第二种,上代码

import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'var isRefreshing = false
var requests = []
// create an axios instance
const service = axios.create({baseURL: process.env.VUE_APP_BASE_API,timeout: 5000 // request timeout
})// request interceptor
service.interceptors.request.use(config => {if (store.getters.token) {config.headers['Authorization'] = 'Bearer ' + getToken()}return config},error => {console.log(error) // for debugreturn Promise.reject(error)}
)// response interceptor
service.interceptors.response.use(/*** If you want to get http information such as headers or status* Please return  response => response*//*** Determine the request status by custom code* Here is just an example* You can also judge the status by HTTP Status Code*/response => {const res = response.dataconsole.log(res, 'response.data')if (res.code === 1) {return res} else if (res.code === 50008 || res.code === 50012 || res.code === 50014) {const config = response.configif (!isRefreshing) {isRefreshing = truereturn store.dispatch('user/resetToken').then((res) => {const token = resconfig.headers['Authorization'] = tokenconfig.baseURL = '' // url已经带上了/api,避免出现/api/api的情况requests.forEach(item => item(token))requests = []// 重试当前请求并返回promise// console.log(service(config), 'service(config)')return service(config)}).catch(err => {console.log(err)// console.error('refreshtoken error =>', res)// 刷新token失败,神仙也救不了了,跳转到首页重新登录吧window.location.href = '/'}).finally(() => {isRefreshing = false})} else {return new Promise((resolve) => {// 将resolve放进队列,用一个函数形式来保存,等token刷新后直接执行requests.push((token) => {config.baseURL = ''config.headers['Authorization'] = tokenresolve(service(config))})})}} else {Message({message: res.message,type: 'error',duration: 5 * 1000})return Promise.reject(res)}},error => {return Promise.reject(error)}
)export default service

思路,
当后端返回无权限时,将请求先保存下来,return一个Promise,利用Promise去刷新token,当请求token成功,拿着心得token,拿着存的config,去再次请求,成功后reslove()
这时带来了一个问题,就是当多次请求时,会多次refresh_token
设置一个状态值,用于记录是否正在刷新token。
如果正在刷新token,将其利用Promise,将其封装为一个函数,内部自动调用resolve,存入一个数组,等到刷新token后,执行存入的函数,执行resolve(),然后依次来再次请求数据,返回正确的数据。

// 我们先看一下,定义fn1
function fn1 () {console.log('执行fn1')
}// 执行fn1,只需后面加个括号
fn1()// 回归到我们request数组中,每一项其实存的就是一个类似fn1的一个函数
const fn2 = (token) => {config.headers['X-Token'] = tokenresolve(config)
}// 我们要执行fn2,也只需在后面加个括号就可以了
fn2()// 由于requests是一个数组,所以我们想遍历执行里面的所有的项,所以用上了forEach
requests.forEach(fn => {// 执行fnfn()
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/785944.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ZKFair 步入Dargon Slayer 新阶段,未来还有哪些财富效应?

在当前区块链技术的发展中,Layer 2(L2)解决方案已成为提高区块链扩容性、降低交易成本和提升交易速度的关键技术,但它仍面临一些关键问题和挑战,例如用户体验的改进、跨链互操作性、安全性以及去中心化程度。在这些背景…

Python 全栈体系【四阶】(十八)

第五章 深度学习 一、基本理论 4. 神经网络的改进 4.1 神经网络的局限 全连接神经网络的局限(一) 未考虑数据的“形状”,会破坏数据空间结构。例如,输入数据是图像时,图像通常是高长通道方向上的 3 维形状。但是&a…

皓学IT:WEB07_ JSP

一、Jsp基础语法 1.1. JSP模板元素 JSP页面中的HTML内容称之为JSP模版元素。 JSP模版元素定义了网页的基本骨架&#xff0c;即定义了页面的结构和外观。 1.2. JSP脚本片段 JSP脚本片断用于在JSP页面中编写多行Java代码&#xff08;在<%%>不能定义方法&#xff09;。…

每天学点儿Python(2)-- if语句,match语句

一、语句块 Python中&#xff0c;语句块是指按一定逻辑顺序组织成的语句。它是通过缩进来表示层级关系&#xff08;其它语言&#xff0c;如C/C,Java等&#xff0c;都是通过大括号{}来表示&#xff09; Python中缩进一般是通过4个空格或一个tab键来表示 二、if语句 if语句表…

云计算概述报告

以下是一篇论述类文章 文章目录 I. 云计算介绍&#xff08;1&#xff09;云计算基本概念&#xff08;2&#xff09;云计算基本特征 II. 云计算发展历程&#xff08;1&#xff09;云计算的起源&#xff08;2&#xff09;云计算的发展阶段 III. 云计算特点&#xff08;1&#xff…

【BFS】母亲的牛奶

农夫约翰有三个容量分别为 A,B,C升的挤奶桶。最开始桶 A 和桶 B 都是空的&#xff0c;而桶 C里装满了牛奶。有时&#xff0c;约翰会将牛奶从一个桶倒到另一个桶中&#xff0c;直到被倒入牛奶的桶满了或者倒出牛奶的桶空了为止。这一过程中间不能有任何停顿&#xff0c;并且不会…

VisionOS应用开发需要哪些工具

标题: VisionOS应用开发需要哪些工具 标签: [VisionOS, 空间计算] 分类: [VisionOS, 开发工具] 说下开发visionOS空间应用需要哪些准备&#xff0c;这里我找了下&#xff0c;列出来给大家。 xcode 15.22d: SwiftUI3d: RealityKit/Unity 3D实体空间: ARKitIntel Mac上可以运行X…

mysql8.0下载安装详细步骤 图文教程

下载mysql 保证电脑上之前没有安装过mysql&#xff0c;或者已经卸载完毕。 mysqk8.0 下载地址 解压 新建一个专门存放mysql文件夹&#xff0c;将下载的压缩包解压到这个文件夹里面。 配置 添加一个data文件夹&#xff0c;用来存放数据 新建一个my.txt文本&#xff0c;复制…

C++语言·入门

现在我们讲完了数据结构初阶部分的内容&#xff0c;数据结构剩下的内容会在C语言讲解的差不多的时候加入。 1. 什么是C C语言是结构化模块化的语言&#xff0c;适合处理较小规模的程序。对于复杂的问题&#xff0c;规模较大的程序&#xff0c;需要高度抽象和建模时&#xff0c…

机器视觉学习(十一)—— 最小矩形和圆形区域、近似轮廓、凸包

目录 一、最小矩形区域与最小圆形区域 1.1 cv2.minAreaRect()函数 1.2 cv2.minEnclosingCircle()函数 1.3 最小矩形区域与最小圆形区域示例 二、 显示近似轮廓 2.1 cv2.approxPolyDP()函数 2.2 显示近似轮廓示例代码 2.2.1 简约版 2.2.2 进阶版 三、 显示凸包 3.…

软件测试-用例篇

目录 1 测试用例的基本要素2 测试用例给我们带来的好处3 测试用例的设计方法3.1 基于需求进行测试用例的设计3.1.1 功能需求测试分析3.1.2 非功能需求测试分析 4 具体的设计方法4.1 等价类4.2 边界值4.3 错误猜测法4.4 场景设计法4.5 因果图4.5.1 因果图需要掌握的基本知识4.5.…

用一个程序解决SQLite常见的各项操作(实用篇)

文章说明&#xff1a; 本篇文章是在之前的一篇文章SQLite3进行数据库各项常用操作基础上写的&#xff0c;将SQLite涉及到的常用的几种操作&#xff0c;以函数的形式处理成相互调用的形式。 因为之前的文章对基础操作已经解释过了&#xff0c;所以这里直接放置可执行代码和结果…

kali常用命令功能简介记录

Kali Linux中常用的命令&#xff1a; 1. apt-get update&#xff1a;更新软件源列表。 2. apt-get upgrade&#xff1a;升级系统中已安装的软件包。 3. apt-get install [软件包]&#xff1a;安装指定的软件包。 4. apt-get remove [软件包]&#xff1a;卸载指定的软件包。 5.…

上海开放大学2024春《机械工程导论》简答题参考答案

答案&#xff1a;更多答案&#xff0c;请关注【电大搜题】微信公众号 答案&#xff1a;更多答案&#xff0c;请关注【电大搜题】微信公众号 答案&#xff1a;更多答案&#xff0c;请关注【电大搜题】微信公众号 机械工程导论 - 简答题 一共五个题&#xff1a; 1. 材料力学…

301.【华为OD机试】最小传输时延I(Dijkstra 算法—JavaPythonC++JS实现)

本文收录于专栏:算法之翼 本专栏所有题目均包含优质解题思路,高质量解题代码(Java&Python&C++&JS分别实现),详细代码讲解,助你深入学习,深度掌握! 文章目录 一. 题目二.解题思路三.题解代码Python题解代码JAVA题解代码C/C++题解代码JS题解代码四.代码讲解(Ja…

基于YOLOv8的绝缘子检测系统

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文摘要&#xff1a;基于YOLOv8的绝缘子小目标检测&#xff0c;阐述了整个数据制作和训练可视化过程 1.YOLOv8介绍 Ultralytics YOLOv8是Ultralytics公司开发的YOLO目标检测和图像分割模型的最新版本。YOLOv8是一种尖端的、最先进的&a…

kali Linux上安装docker过程记录

安装情况&#xff1a; 直接安装提示错误&#xff01;&#xff01;&#xff01; 安装程序命令&#xff1a; apt install -y docker.io 安装结果提示安装失败&#xff01;&#xff01;&#xff01;看别人安装直接成功到我这怎么失败&#xff01;&#xff01;&#xff01;找原因…

引用,内联函数,auto函数,指针nullptr

一&#xff1a;引用 1.1 该文章的引用是对上一篇引用的进行补充和完善 按理来说&#xff0c;double可以隐式转换为int&#xff0c;那起别名的时候为什么不可以类型转换呢&#xff1f; 那是因为&#xff0c;在类型转换的时候&#xff0c;会创建一个临时变量&#xff0c;让后再…

如何提高小红书笔记的收录率?

在小红书平台上&#xff0c;笔记的收录率是衡量一篇笔记是否受欢迎和有价值的重要因素。为了提高笔记的收录率&#xff0c;有几个关键点需要注意&#xff1a; 1.内容不涉及广告 在发布笔记前要先确保笔记内容不包含任何形式的广告或推广信息。小红书平台对于广告性质的内容有…

资治通鉴读后感之【顺应人性、联盟、创业切入点、领袖魅力】

目录 顺应人性&#xff1a; 联盟&#xff1a; 防蚁穴&#xff1a; 创业者切入点&#xff1a; 组建团队&#xff1a; 顺应人性&#xff1a; 不着急、不害怕、不要脸的精神 兴衰、人性、道德、权谋 优秀的人才&#xff1a;愿和你交流的时候&#xff0c;多交流&#xff0c;…