当前位置: 首页 > news >正文

axios 实现 无感刷新方案

  1. 实现思路
    1. 首次登录前端通过接口获取到两个 token;分别是 accessToken、refreshToken;
    2.  accessToken:正常请求需要传递的  token ;
    3. refreshToken:当某个请求 401 ,就可以通过 refreshToken 获取到新的 accessToken
    4.  特殊场景:如果 refreshToken 也过期了 ,那就默认跳回 登录页,重新登录,就类似  七天免登录的场景、过了 第七天,refreshToken  也就过期了;
  2. 代码
    1. 
      import axios from "axios";
      import { refreshToken } from "../api/index"; //刷新token的api
      let isRefreshToken = false; //是否正在进行刷新token
      let requestList = []; // 请求队列const request = axios.create({baseURL: "/api",timeout: 10000,
      });// 请求拦截器
      request.interceptors.request.use((config) => {let headerToken = localStorage.getItem("acc_token");// 设置请求头config.headers.Authorization = `Bearer ${headerToken}`;return config;},(error) => {// 请求错误时做些事return Promise.reject(error);}
      );// 响应拦截器
      request.interceptors.response.use(async (response) => {// 401 代表token过期,需要刷新tokenif (response.data.code == 401) {// 这里可以加入判断,判断 refreshToken 也过期了,直接 router.push 回登录页// if () {// router.push('/login')// }if (!isRefreshToken) {isRefreshToken = true;let res = await refreshToken(); // 刷新 token 的接口isRefreshToken = false;localStorage.setItem("acc_token", res.data.accToken);//   重发请求队列请求requestList.forEach((callback) => {callback();});requestList = [];let currentRequest = await request(response.config);return currentRequest;} else {// 将并发的请求,通过回调函数暂存起来,当token 刷新之后,在进行请求return new Promise((resolve) => {requestList.push(() => {resolve(request(response.config));});});}}return response;},(error) => {return Promise.reject(error);}
      );export default request;

http://www.lryc.cn/news/484511.html

相关文章:

  • Python 三种方式实现自动化任务
  • 新型创业模式:退休创业。没有工资,不用投资,有时间就干,不强制做,赚钱按贡献分。
  • Android 项目依赖库无法找到的解决方案
  • 在Node.js中如何使用TypeScript
  • 链表两数加python
  • 免费的可以薅羊毛的cloudflare反向代理教程
  • 【每日刷题】Day155
  • EXCEL延迟退休公式
  • 开源对象存储新选择:在Docker上部署MinIO并实现远程管理
  • Spring Cloud生态圈
  • AI视觉小车基础--4.舵机控制(云台控制)
  • 【Rust中的项目管理】
  • 【原创】如何备份和还原Ubuntu系统,非常详细!!
  • 成都栩熙酷网络科技抖音小店是真的
  • Python 爬虫数据清洗与存储:基础教程
  • ssm122基于Java的高校教学业绩信息管理系统+jsp(论文+源码)_kaic
  • Java 基础知识
  • 深入探索 React Hooks:原理、用法与性能优化全解
  • python中父类和子类继承学习
  • Linux——GPIO输入输出裸机实验
  • 华为鸿蒙HarmonyOS NEXT升级HiCar:打造未来出行新体验
  • 【项目组件】第三方库——websocketpp
  • 计算机23级数据结构上机实验(第3-4周)
  • 【大数据学习 | HBASE高级】region split机制和策略
  • flink实战 -- flink SQL 实现列转行
  • React中右击出现自定弹窗
  • Unity类银河战士恶魔城学习总结(P128 Switch UI with KeyBoard用键盘切换UI)
  • 基于Springboot+微信小程序的急救常识学习系统 (含源码数据库)
  • 【云计算解决方案面试整理】3-7主流云计算平台、云计算架构、安全防护
  • 数据库范式、MySQL 架构、算法与树的深入解析