【前端开发】小程序无感登录验证

embedded/2024/11/30 8:31:28/

概述

封装的网络请求库,主要用于处理 API 请求并支持自动处理 token 过期 和 token 刷新,适用于需要身份验证的应用场景,特别是在移动端中。

主要功能

  1. 自动附加 Token

在每个请求中自动附加 Authorization 头部,使用存储的 accessToken。如果某个请求不需要 Token,则可以通过设置 isToken: false 来排除。

  1. Token 过期自动刷新
  • 当请求返回提示 accessToken 过期时,自动尝试使用 refreshToken 刷新 accessToken
  • 在刷新过程中,新的请求会被放入一个队列中,等到 refreshToken 成功后再依次重试
  1. 请求重试机制
  • 当 accessToken 刷新成功后,队列中的所有待处理请求都会自动重发
  • 如果 refreshToken 刷新失败,跳转到登录页面,让用户重新登录。
  1. 统一的请求和响应处理
  • 请求的 Content-Type 和 Accept 头部统一设置
  • 统一处理服务器返回的状态码,若返回 200 且不含 ErrType: -10011,则正常返回数据,否则进行相关的错误处理

代码概览

  1. refreshToken 函数
  • 用于发送请求以刷新 accessToken,通过 refreshToken 获取新的 accessToken,并保存在本地
  • 若成功,返回新的 accessToken;若失败,返回错误信息。
  1. request 函数
  • 封装了 uni.request 请求方法,提供了 GET、POST 请求支持。
    检查是否有有效的 accessToken,如果有,自动将其附加到请求头的 Authorization 中
  • 如果请求参数中包含 params,则自动将其转换为查询字符串附加到 URL 中
  • 在请求成功时,判断返回数据的 ErrType 是否为 -10011(表示 accessToken 过期),若过期,则调用 handleTokenExpiration 函数刷新 Token
  1. handleTokenExpiration 函数
  • 处理 accessToken 过期的逻辑,避免在刷新 Token 的过程中发起多次刷新请求
  • 如果当前没有刷新请求正在进行,则调用 refreshToken 函数尝试刷新 Token,并将待重试的请求保存在队列中
  • 如果刷新 Token 成功,则重试队列中的请求,重新发送
  • 如果刷新 Token 失败,清空队列并跳转到登录页面
  1. isRefreshing 和 requestQueue
  • isRefreshing 用于确保只有一个刷新请求在进行,避免并发刷新 Token 的情况
  • requestQueue 用于存储等待 Token 刷新完成后的请求,确保刷新完成后再逐一处理这些请求

工作流程

  • 用户首次登录时,后端会返回 accessToken 和 refreshToken
  • 后续的 API 请求都会自动附带 accessToken
  • 当 accessToken 过期时,后端返回 ErrType: -10011,触发 handleTokenExpiration
  • handleTokenExpiration 检查是否正在进行刷新操作,如果没有,则开始刷新并保存待重试的请求
  • 刷新完成后,重试这些请求,确保请求使用最新的 accessToken

Request.js

import store from "@/store";
import config from "@/common/config";
import { getToken, getRefreshToken, setToken } from "@/common/auth";
import { tansParams } from "@/common/index";let timeout = 10000;
const baseUrl = config.baseUrl;const refreshToken = () => {return new Promise((resolve, reject) => {uni.request({method: "post",url: `${baseUrl}/auth/refresh`,data: { refreshToken: getRefreshToken() },header: { "Content-Type": "application/json" },}).then((response) => {if (response.statusCode === 200 && response.data.accessToken) {setToken(response.data.accessToken);resolve(response.data.accessToken);} else {reject("刷新令牌失败");}}).catch((error) => {reject(error);});});
};const request = (config) => {const isToken = (config.headers || {}).isToken === false;config.header = config.header || {};if (getToken() && !isToken) {config.header["Authorization"] = "Bearer " + getToken();}if (config.params) {let url = config.url + "?" + tansParams(config.params);url = url.slice(0, -1);config.url = url;}config.header["Content-Type"] ="application/x-www-form-urlencoded; charset=UTF-8";config.header["Accept"] = "application/json, text/javascript, */*; q=0.01";return new Promise((resolve, reject) => {uni.request({method: config.method || "get",timeout: config.timeout || timeout,url: config.baseUrl || baseUrl + config.url,data: config.data,header: config.header,dataType: "json",}).then((response) => {if (response.statusCode === 200) {//登录过期if (response.data.ErrType == "-10011") {// Access Token 过期handleTokenExpiration(config, resolve, reject);} else {resolve(response.data);}} else {reject("服务器连接异常");}}).catch((error) => {reject(error);});});
};let isRefreshing = false; // 防止多次刷新
let requestQueue = []; // 队列存储待重试的请求const handleTokenExpiration = (config, resolve, reject) => {if (!isRefreshing) {isRefreshing = true; // 开始刷新refreshToken().then((newToken) => {isRefreshing = false;// 刷新成功后,重试队列中的请求requestQueue.forEach((callback) => callback(newToken));requestQueue = []; // 清空队列// 重新发送当前请求resolve(request({...config,header: {...config.header,Authorization: "Bearer " + newToken,},}));}).catch((error) => {isRefreshing = false;requestQueue = []; // 清空队列// 刷新失败,跳转到登录页面uni.reLaunch({url: "/pages/login",});reject("登录已过期,请重新登录");});} else {// 如果已经在刷新,将请求加入队列requestQueue.push((newToken) => {resolve(request({...config,header: {...config.header,Authorization: "Bearer " + newToken,},}));});}
};export default request;

http://www.ppmy.cn/embedded/141694.html

相关文章

【ChatGPT大模型开发调用】如何获得 OpenAl API Key?

如何获取 OpenAI API Key 获取 OpenAI API Key 主要有以下三种途径: OpenAI 官方平台 (推荐): 开发者用户可以直接在 OpenAI 官方网站 (platform.openai.com) 注册并申请 API Key。 通常,您可以在账户设置或开发者平台的相关页面找到申请入口。 Azure…

什么是JAVA反射??? 常用的API有哪些???怎么获取Class对象.....

目录 引言: 一、获取Class对象的方法 二、使用反射获取构造方法 三、使用反射获成员变量的方法 四、使用反射获成员方法 五.反射的优缺点有哪些? 优点包括: 缺点包括: 总结: 引言: 什么是反射:反射其实我们很早就知晓了…

Linux开发者的CI/CD(11)jenkins变量

文章目录 1. **环境变量 (Environment Variables)**常见的环境变量:示例:2. **构建参数 (Build Parameters)**常见的构建参数类型:示例:3 **在 `stages` 块内定义局部变量**示例:使用 `script` 步骤定义局部变量4 变量引用陷阱在 Jenkins 中,变量是自动化流程中非常重要的…

Vue进阶面试题目(四)

1. 什么是双向绑定? Vue 双向绑定的原理是什么? 双向绑定是一种数据绑定机制,指的是视图和数据之间可以相互同步。即,当模型数据(Model)发生变化时,视图(View)会自动更新;反之&am…

使用PyQt5开发一个GUI程序的实例演示

一、安装Python 下载安装到这个目录 G:\Python38-32 安装完成有这些工具,后面备用: G:\Python38-32\Scripts\pyrcc5.exe G:\Python38-32\Scripts\pyuic5.exe 二、PyQt环境配置 pip install PyQt5 pip install pyqt5-tools 建议使用国内源&#xff0c…

随机变量的线性最小均方估计(LMMSE)——多个观测变量

假设有一个随机变量 x x x需要估计,目标是找到一个线性估计器 x ^ ∑ i 0 N − 1 a i y i b \hat{x} \sum_{i0}^{N-1} a_i y_i b x^∑i0N−1​ai​yi​b,使得估计误差 e x − x ^ e x - \hat{x} ex−x^的均方误差 E [ e 2 ] E[e^2] E[e2]最小。 …

记一次 .NET某hdp智能柜系统 卡死分析

一:背景 1. 讲故事 停了一个月时间没有更新博客了,主要是这段时间有些许事情导致心神不宁,我这个人也比较浮躁所以无法潜心修炼,事情如下: 被狗咬了 也不知道是不是出门没看黄历,在小区门口店里买烟&am…

uniapp实现轮播图结构数据渲染

实现轮播图结构数据渲染 swiper swiper | uni-app官网 (dcloud.net.cn) 滑块视图容器。【设计人员应以375px的宽度设计小程序】 一般用于左右滑动或上下滑动&#xff0c;比如banner轮播图。 组件代码 <swiper indicator-dots circular><swiper-item v-for"i…