axios 实现 无感刷新方案

  1. 实现思路

    1. 首次登录前端通过接口获取到两个 token;分别是 accessToken、refreshToken;
    2. accessToken:正常请求需要传递的 token ;
    3. refreshToken:当某个请求 401 ,就可以通过 refreshToken 获取到新的 accessToken
    4. 特殊场景:如果 refreshToken 也过期了 ,那就默认跳回 登录页,重新登录,就类似 七天免登录的场景、过了 第七天,refreshToken 也就过期了;
  2. 代码
    1.

    javascript 复制代码
    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过期,需要刷新token
        if (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;
相关推荐
亭台烟雨中11 分钟前
【前端记事】关于electron的入门使用
前端·javascript·electron
泯泷25 分钟前
「译」解析 JavaScript 中的循环依赖
前端·javascript·架构
抹茶san27 分钟前
前端实战:从 0 开始搭建 pnpm 单一仓库(1)
前端·架构
Senar1 小时前
Web端选择本地文件的几种方式
前端·javascript·html
烛阴1 小时前
UV Coordinates & Uniforms -- OpenGL UV坐标和Uniform变量
前端·webgl
姑苏洛言1 小时前
扫码小程序实现仓库进销存管理中遇到的问题 setStorageSync 存储大小限制错误解决方案
前端·后端
烛阴1 小时前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
lh_12542 小时前
ECharts 地图开发入门
前端·javascript·echarts