前端无感刷新token

在这里插入图片描述
摘要:

Axios 无感知刷新令牌是一种在前端应用中实现自动刷新访问令牌(access token)的技术,确保用户在进行 API 请求时不会因为令牌过期而中断操作

目录概览

    • XMLHttpRequest
    • Axios
    • Fetch API
    • JQ
    • uni.request
    • 注意事项:

  • 访问令牌(Access Token):用于访问受保护资源的凭证,通常有一定的有效期。
  • 刷新令牌(Refresh Token):用于获取新的访问令牌,当访问令牌过期时使用。

实现步骤:

  1. 设置拦截器:在 Axios的请求拦截器中添加逻辑,检查当前时间与令牌的过期时间。如果访问令牌已过期但刷新令牌仍然有效,则调用刷新令牌接口获取新的访问令牌。
  2. 更新令牌存储:一旦获得新的访问令牌,将其存储到 localStorage、Vuex 或其他状态管理工具中,以便后续请求使用新令牌。
  3. 重试原始请求:在成功刷新令牌后,重新发送被拦截的请求,此时使用新的访问令牌。

XMLHttpRequest

// 创建 XMLHttpRequest 实例
const xhr = new XMLHttpRequest();// 登录成功后保存 Token 和 Refresh Token
function onLoginSuccess(response) {localStorage.setItem('accessToken', response.data.accessToken);localStorage.setItem('refreshToken', response.data.refreshToken);
}// 发起请求的函数
function sendRequest(url, method, data) {return new Promise((resolve, reject) => {xhr.open(method, url);xhr.setRequestHeader('Authorization', `Bearer ${localStorage.getItem('accessToken')}`);xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if (xhr.status === 200) {resolve(JSON.parse(xhr.responseText));} else {reject({ status: xhr.status, response: xhr.responseText });}}};if (method === 'POST' && data) {xhr.send(JSON.stringify(data));} else {xhr.send();}});
}// 刷新 Token 的函数
async function refreshToken() {const refreshToken = localStorage.getItem('refreshToken');const response = await fetch('/path/to/refresh', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify({ refresh_token: refreshToken }),});const res = await response.json();if (res.success) {localStorage.setItem('accessToken', res.data.newAccessToken);return true; // 表示刷新成功} else {return false; // 表示刷新失败}
}// 拦截响应并处理 Token 刷新
xhr.addEventListener('readystatechange', function() {if (xhr.readyState === 4 && xhr.status === 401) {refreshToken().then(refreshed => {if (refreshed) {xhr.setRequestHeader('Authorization', `Bearer ${localStorage.getItem('accessToken')}`);xhr.send(); // 重新发送请求} else {alert('请重新登录'); // Token 刷新失败,可能需要用户重新登录}});}
});

Axios

import axios from 'axios';// 创建 Axios 实例
const apiClient = axios.create({baseURL: 'https://your-api-url.com',// 其他配置...
});// 响应拦截器
apiClient.interceptors.response.use(response => {return response;
}, error => {const { response } = error;if (response && response.status === 401) {return refreshToken().then(refreshed => {if (refreshed) {// 令牌刷新成功,重试原始请求return apiClient.request(error.config);} else {// 令牌刷新失败,可能需要用户重新登录return Promise.reject(error);}});}return Promise.reject(error);
});// 令牌刷新函数
function refreshToken() {return apiClient.post('/path/to/refresh', {// 刷新令牌所需的参数,例如 refresh_token}).then(response => {if (response.data.success) {// 假设响应数据中包含新的访问令牌const newAccessToken = response.data.newAccessToken;// 更新令牌存储localStorage.setItem('accessToken', newAccessToken);// 更新 Axios 实例的 headers,以便后续请求使用新令牌apiClient.defaults.headers.common['Authorization'] = `Bearer ${newAccessToken}`;return true; // 表示刷新成功} else {return false; // 表示刷新失败}});
}

Fetch API

// 定义一个函数来处理Fetch请求
async function fetchWithToken(url, options = {}) {const token = localStorage.getItem('token');if (token) {options.headers = {...options.headers,'Authorization': `Bearer ${token}`};}try {const response = await fetch(url, options);if (response.status === 401) { // 假设401表示令牌过期const refreshToken = localStorage.getItem('refreshToken');if (!refreshToken) {throw new Error('No refresh token available');}// 调用刷新令牌接口const refreshResponse = await fetch('/api/refresh-token', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ refreshToken })});if (refreshResponse.ok) {const data = await refreshResponse.json();localStorage.setItem('token', data.newAccessToken);// 重新尝试原始请求options.headers['Authorization'] = `Bearer ${data.newAccessToken}`;return fetch(url, options);} else {throw new Error('Failed to refresh token');}}return response;} catch (error) {console.error('Fetch error:', error);throw error;}
}// 使用示例
fetchWithToken('/api/protected-resource').then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error:', error));
  • fetchWithToken函数: 这是一个封装了Fetch API的函数,它首先检查本地存储中的访问令牌是否存在,并在请求头中添加该令牌。如果响应状态码为401(表示令牌过期),则尝试使用刷新令牌获取新的访问令牌,并重新发送原始请求。
  • 刷新令牌逻辑: 在检测到令牌过期时,函数会调用刷新令牌接口,并将新的访问令牌存储到本地存储中。然后,它会重新设置请求头中的授权信息,并重新发送原始请求。
  • 错误处理: 如果在刷新令牌或发送请求的过程中发生错误,函数会抛出相应的错误,并在控制台中记录错误信息。

JQ

// 创建 JQuery 实例
const apiClient = $.ajaxSetup({baseURL: 'https://your-api-url.com',// 其他配置...
});// 响应拦截器
$.ajaxSetup({complete: function(jqXHR, textStatus) {if (textStatus === 'error' && jqXHR.status === 401) {return refreshToken().then(refreshed => {if (refreshed) {// 令牌刷新成功,重试原始请求return apiClient.request(this);} else {// 令牌刷新失败,可能需要用户重新登录alert('请重新登录');}});}}
});// 令牌刷新函数
function refreshToken() {return $.ajax({url: '/path/to/refresh',method: 'POST',data: {refresh_token: localStorage.getItem('refreshToken')},dataType: 'json'}).then(response => {if (response.data.success) {// 假设响应数据中包含新的访问令牌const newAccessToken = response.data.newAccessToken;// 更新令牌存储localStorage.setItem('accessToken', newAccessToken);// 更新 JQuery 实例的 headers,以便后续请求使用新令牌apiClient.defaults.headers.common['Authorization'] = `Bearer ${newAccessToken}`;return true; // 表示刷新成功} else {return false; // 表示刷新失败}});
}

uni.request

// 导入封装的request插件
import http from './interface';
import { getRefreshToken } from '@/common/api/apis.js'; // 刷新token接口let isRefreshing = false; // 是否处于刷新token状态中
let fetchApis = []; // 失效后同时发送请求的容器
let refreshCount = 0; // 限制无感刷新的最大次数function onFetch(newToken) {refreshCount += 1;if (refreshCount === 3) {refreshCount = 0;fetchApis = [];return Promise.reject();}fetchApis.forEach(callback => {callback(newToken);});// 清空缓存接口fetchApis = [];return Promise.resolve();
}// 响应拦截器
http.interceptor.response((response) => {if (response.config.loading) {uni.hideLoading();}// 请求成功但接口返回的错误处理if (response.data.statusCode && +response.data.statusCode !== 200) {if (!response.config.needPromise) {console.log('error', response);uni.showModal({title: '提示',content: response.data.message,showCancel: false,confirmText: '知道了'});// 中断return new Promise(() => {});} else {// reject Promisereturn Promise.reject(response.data);}}return response;
}, (error) => {const token = uni.getStorageSync('token');const refreshToken = uni.getStorageSync('refreshToken');// DESC: 不需要做无感刷新的白名单接口const whiteFetchApi = ['/dealersystem/jwtLogin', '/dealersystem/smsLogin', '/sso2/login', '/dealersystem/isLogin'];switch (error.statusCode) {case 401:case 402:if (token && !whiteFetchApi.includes(error.config.url)) {if (!isRefreshing) {isRefreshing = true;getRefreshToken({ refreshToken }).then(res => {let newToken = res.data;onTokenFetched(newToken).then(res => {}).catch(err => {// 超过循环次数时,回到登录页,这里可以添加你执行退出登录的逻辑uni.showToast({ title: '登录失效,请重新登录', icon: 'error' });setTimeout(() => {uni.reLaunch({ url: '/pages/login/login' });}, 1500);});}).catch(err => {// refreshToken接口报错,证明refreshToken也过期了,那没办法啦重新登录呗uni.showToast({ title: '登录失效,请重新登录', icon: 'error' });setTimeout(() => {uni.reLaunch({ url: '/pages/login/login' });}, 1500);}).finally(() => { isRefreshing = false });}return new Promise((resolve) => { // 此处的promise很关键,就是确保你的接口返回值在此处resolve,以便后续代码执行addFetchApi((newToken) => {error.config.header['Authorization'] = `Bearer ${newToken}`;http.request(error.config).then(response => {resolve(response);});});});}break;default:break;}
});

注意事项:

  • 错误处理:确保在刷新令牌失败时,有适当的错误处理机制,例如提示用户重新登录。
  • 并发请求:处理多个请求同时需要刷新令牌的情况,避免重复刷新。
  • 安全性:确保刷新令牌的安全存储和传输,防止被恶意攻击者获取。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/472778.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

图形 2.6 伽马校正

伽马校正 B站视频:图形 2.6 伽马校正 文章目录 伽马校正颜色空间传递函数 Gamma校正校正过程为什么需要校正?CRT与转换函数 为什么sRGB在Gamma 0.45空间? 人对亮度的敏感韦伯定律中灰值 线性工作流不在线性空间下进行渲染的问题统一到线性空…

【redis】—— 环境搭建教程

上一节,我们大致了解了Redis的几个重要版本,在本教程中,我们选择了5.0版本,因为5.0已经具备了大部分的功能特性,并且与7.0版本相比,其安装使用过程更为简便。 Redis的官方并不直接支持微软的Windows操作系统…

Springboot采用jasypt加密配置

目录 前言 一、Jasypt简介 二、运用场景 三、整合Jasypt 2.1.环境配置 2.2.添加依赖 2.3.添加Jasypt配置 2.4.编写加/解密工具类 2.5.自定义加密属性前缀和后缀 2.6.防止密码泄露措施 2.61.自定义加密器 2.6.2通过环境变量指定加密盐值 总结 前言 在以往的多数项目中&#xff0…

【机器学习导引】ch6-支持向量机

参考链接 【数之道】支持向量机SVM是什么,八分钟直觉理解其本质 间隔与支持向量 **问题引入:**在样本空间中寻找一个超平面,将不同类别的样本分类 超平面:在支持向量机中,模型的目标是找到一个能够分开不同类别的平…

详解map与multimap容器

目录 一、map简介 1.map构成 2.map本质 3.map的优点 4.map和multimap区别:map不允许容器中有重复key值元素。multimap允许容器中有重复key值元素。 5.map的构建 6.map的赋值 1️⃣赋值法 2️⃣拷贝赋值法 7.map的成员函数 (1)inse…

PyAEDT:Ansys Electronics Desktop API 简介

在本文中,我将向您介绍 PyAEDT,这是一个 Python 库,旨在增强您对 Ansys Electronics Desktop 或 AEDT 的体验。PyAEDT 通过直接与 AEDT API 交互来简化脚本编写,从而允许在 Ansys 的电磁、热和机械求解器套件之间无缝集成。通过利…

ubuntu将firewall-config导出为.deb文件

firewall-config ubuntu是canonial 公司维护的,用wireshark测过,开机会给他们公司发遥测(开了ufw阻塞所有连接也一样,canonial在里面把代码改了)firewall-config是fedora(爱好者维护,公益版本)自带的防火墙…

LLMs之Code:Qwen2.5-Coder的简介、安装和使用方法、案例应用之详细攻略

LLMs之Code:Qwen2.5-Coder的简介、安装和使用方法、案例应用之详细攻略 导读:这篇论文介绍了Qwen2.5-Coder系列模型,这是一个针对代码生成的强大开源大型语言模型。 >> 背景痛点:现有代码大型语言模型的不足:虽然…

H3C NX30Pro刷机教程-2024-11-16

H3C NX30Pro刷机教程-2024-11-16 ref: http://www.ttcoder.cn/index.php/2024/11/03/h3c-nx30pro亲测无需分区备份 路由器-新机初始化设置路由器登录密码telnet进入路由器后台 刷机上传uboot到路由器后台在Windows环境下解压后的软件包中打开 tftpd64.exe在NX30Pro环境下通过以…

FPGA使用Verilog实现CAN通信

FPGA实现CAN通信(Verilog) 1.作者使用的方法是通过FPGA芯片(如Xilinx公司的型号为XC7K325TFFG676-2)控制SJA1000T芯片(CAN控制器芯片)实现CAN通信,如下图所示: 2.熟悉连接方式之后&…

27-压力测试

测试目标 & 测试数据 ● 测试目标 ○ 测试集群的读写性能 / 做集群容量规划 ○ 对 ES 配置参数进行修改,评估优化效果 ○ 修改 Mapping 和 Setting,对数据建模进行优化,并测试评估性能改进 ○ 测试 ES 新版本,结合实际场…

单元测试、集成测试、系统测试、验收测试、压力测试、性能测试、安全性测试、兼容性测试、回归测试(超详细的分类介绍及教学)

目录 1.单元测试 实现单元测试的方法: 注意事项: 2.集成测试 需注意事项: 实现集成测试的方法: 如何实现高效且可靠的集成测试: 3.系统测试 实现系统测试的方法: 须知注意事项: 4.验收测试 实现验…

vxe-grid table 校验指定行单元格的字段,只校验某个列的字段

Vxe UI vue vxe-table 中校验表格行是非常简单的,只需要配置好校验规则,然后调用 validate 方法就可以自动完成校验,但是由于项目淡色特殊需求,在某个单元格的值修改后需要对另一个列的值就行校验,这个时候又不需要全部…

网络基础(4)传输层

既然是传输层首先就要明确实在层状结构的哪里,除开物理层之外分成了四层协议: 到这里上层(应用层)的使用已经没有问题,之前使用的套接字都是在应用层的。 再说端口号 到一个主机收到一个报文的时候,这个报文中一定存在这个报文需要到的主机的ip号。如果…

如何利用WebSockets实现高效的实时通信应用

💓 博客主页:瑕疵的CSDN主页 📝 Gitee主页:瑕疵的gitee主页 ⏩ 文章专栏:《热点资讯》 如何利用WebSockets实现高效的实时通信应用 如何利用WebSockets实现高效的实时通信应用 如何利用WebSockets实现高效的实时通信应…

stm32——通用定时器时钟知识点

(该图来自小破站 铁头山羊老师的stm32标准库教学)

Excel使用-弹窗“此工作簿包含到一个或多个可能不安全的外部源的链接”的发生与处理

文章目录 前言一、探讨问题发生原因1.引入外部公式2.引入外部数据验证二、问题现象排查及解决1.排查公式2.排查数据验证3.特殊处理方式总结前言 作为一种常用的办公软件,Excel被大家所熟知。尽管使用了多年,有时候在使用Excel时候也会发生一些不太常见的现象,需要用心核查下…

Spring中的Bean

Spring中的Bean 目录: 一、Bean的配置 二、Bean的实例化 三、Bean的作用域 四、Bean的装配方式 一、Bean的配置 1.IoC 容器 ​ Spring容器会负责控制程序之间的关系,而不是由程序代码直接控制,这样控制权由应用代码转移到了外部容器&…

无效的目标发行版17和无法连接Maven进程问题

起因:我clean了一个模块的Maven想要重新下,他就开始报错。两次了都是这样。如果和我一样一开始都是好好的,直接找Maven的设置,在运行程序改,jre变成了11.它自己变成了我其他的jdk

猎板PCB罗杰斯板材的应用案例

以下是几个猎板 PCB 与罗杰斯板材结合的具体案例: 案例一:5G 通信基站天线 PCB 在 5G 通信基站的天线系统中,对高频信号的传输和处理要求极高。猎板 PCB 采用罗杰斯板材,凭借其稳定的低介电常数(如 RO4003C 板材&…