关于设计模式:给前端同学的设计模式精讲课吾爱fen享

download:https://www.sisuoit.com/2900….

需要
对于须要前端实现无痛刷新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 = [];

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据