关于vue3:基于-Vue3-打造前台中台通用提效解决方案吾爱fen享

download：https://www.sisuoit.com/2915….

需要

对于须要前端实现无痛刷新 Token，无非就两种：

申请前判断 Token 是否过期，过期则刷新
申请后依据返回状态判断是否过期，过期则刷新

解决逻辑

实现起来也没多大差异，只是判断的地位不一样，外围原理都一样：

判断 Token 是否过期
没过期则失常解决
过期则发动刷新 Token 的申请
拿到新的 Token 保留
从新发送 Token 过期这段时间内发动的申请
重点：

放弃 Token 过期这段时间发动申请状态（不能进入失败回调）
把刷新 Token 后从新发送申请的响应数据返回到对应的调用者

实现

• 创立一个 flag isRefreshing 来判断是否刷新中
• 创立一个数组队列 retryRequests 来保留须要从新发动的申请
• 判断到 Token 过期
• isRefreshing = false 的状况下 发动刷新 Token 的申请
• 刷新 Token 后遍历执行队列 retryRequests

isRefreshing = true 示意正在刷新 Token，返回一个 Pending 状态的 Promise, 并把申请信息保留到队列retryRequests 中

import axios from "axios";
import Store from "@/store";
import Router from "@/router";
import {Message} from "element-ui";
import UserUtil from "@/utils/user";

// 创立实例
const Instance = axios.create();
Instance.defaults.baseURL = "/api";
Instance.defaults.headers.post["Content-Type"] = "application/json";
Instance.defaults.headers.post["Accept"] = "application/json";

// 定义一个 flag 判断是否刷新 Token 中
let isRefreshing = false;
// 保留须要从新发动申请的队列
let retryRequests = [];