前端与 Spring Boot 后端无感 Token 刷新 - 从原理到全栈实践

优质文章学习记录

— 9 min read
前端与 Spring Boot 后端无感 Token 刷新 - 从原理到全栈实践
在这里插入图片描述
🌷 古之立大事者，不惟有超世之才，亦必有坚忍不拔之志
🎐 个人CSND主页——Micro麦可乐的博客
🐥《Docker实操教程》专栏以最新的Centos版本为基础进行Docker实操教程，入门到实战
🌺《RabbitMQ》专栏19年编写主要介绍使用JAVA开发RabbitMQ的系列教程，从基础知识到项目实战
🌸《设计模式》专栏以实际的生活场景为案例进行讲解，让大家对设计模式有一个更清晰的理解
🌛《开源项目》本专栏主要介绍目前热门的开源项目，带大家快速了解并轻松上手使用
🍎 《前端技术》专栏以实战为主介绍日常开发中前端应用的一些功能以及技巧，均附有完整的代码示例
✨《开发技巧》本专栏包含了各种系统的设计原理以及注意事项，并分享一些日常开发的功能小技巧
💕《Jenkins实战》专栏主要介绍Jenkins+Docker的实战教程，让你快速掌握项目CI/CD，是2024年最新的实战教程
🌞《Spring Boot》专栏主要介绍我们日常工作项目中经常应用到的功能以及技巧，代码样例完整
👍《Spring Security》专栏中我们将逐步深入Spring Security的各个技术细节，带你从入门到精通，全面掌握这一安全技术
如果文章能够给大家带来一定的帮助！欢迎关注、评论互动～

前端与 Spring Boot 后端无感 Token 刷新 - 从原理到全栈实践

1. 前言

在我们前后端分离的应用中，常用的身份认证方案是基于 JWT（JSON Web Token）。在保证安全性的同时，短生命周期的 Access Token 又会带来频繁登录的体验痛点。为了解决这个问题，我们引入 Refresh Token 并结合无感刷新机制，让客户端在 Access Token 过期时自动刷新，而无需用户手动重新登录，从而最大化提升用户体验。

小伙伴们可以通过本文，快速掌握无感 Token 刷新的原理以及实现方式

2. 为什么要无感刷新

在基于Token的用户认证系统中，通常会设计两种Token：

Access Token：用于访问资源，有效期短（通常15-30分钟）
Refresh Token：用于获取新Access Token，有效期长（通常7天）

传统Token机制存在两大痛点：

频繁强制退出：Access Token过期时用户需重新登录
安全隐患：延长Access Token有效期会增加安全风险

无感刷新解决了这些问题：

用户体验优先
Access Token 常设很短（如 5–15 分钟），若不自动刷新，登录态会频繁过期，用户被迫“重新登录”，体验极差

安全与性能平衡
短生命周期的 Access Token 能减少被截获滥用的风险
结合 Refresh Token（相对较长有效期），可以在安全与便捷间找到最佳点

前后端解耦
通过前端拦截器统一处理过期场景，无须在各业务请求中散落重复逻辑
后端专注提供刷新接口与失效策略，无需关心前端实现细节

3 无感刷新原理

3.1 无感刷新流程

在这里插入图片描述

3.2 关键技术点

双 Token 机制

Access Token：短时有效，携带用户身份和权限
Refresh Token：长期有效，专用于换取新的 Access Token

拦截与重试

1、前端在每次 API 请求中携带 Access Token；
2、若响应为 401 Unauthorized（或后端自定义过期码），前端拦截器自动调用刷新token接口，用 Refresh Token 获取新一对 Token；
3、获取成功后，前端重新发起失败的原始请求，用户无感知。

后端安全策略
将 Refresh Token 写入 Redis，并在刷新时做一次性或者滑动过期（可选）校验；
旧 Refresh Token 刷新后失效，防止被盗用。

4、前端实现

下面以 Axios 为例演示拦截器逻辑。我们将 Tokens 保存在 localStorage 或者更安全的 [HttpOnly Cookie] 中（此处示例用 localStorage 方便演示）

// auth.jsimport axios from'axios';// Base Axios 实例const api = axios.create({baseURL:'/api',});// Token 存取functiongetAccessToken(){return localStorage.getItem('access_token');}functiongetRefreshToken(){return localStorage.getItem('refresh_token');}functionsetTokens({ accessToken, refreshToken }){ localStorage.setItem('access_token', accessToken); localStorage.setItem('refresh_token', refreshToken);}// 请求拦截：自动附带 Access Token api.interceptors.request.use(config=>{const token =getAccessToken();if(token) config.headers['Authorization']=`Bearer ${token}`;return config;});// 响应拦截：遇到 401 刷新并重试let isRefreshing =false;let subscribers =[];functiononRefreshed(newToken){ subscribers.forEach(cb=>cb(newToken)); subscribers =[];}functionaddSubscriber(cb){ subscribers.push(cb);} api.interceptors.response.use(res=> res,error=>{const{ config, response }= error;if(response && response.status ===401&&!config._retry){if(isRefreshing){// 正在刷新，加入队列returnnewPromise(resolve=>{addSubscriber(token=>{ config.headers['Authorization']=`Bearer ${token}`;resolve(api(config));});});} config._retry =true; isRefreshing =true;// 调用刷新接口return api.post('/auth/refresh',{refreshToken:getRefreshToken()}).then(res=>{const{ accessToken, refreshToken }= res.data;setTokens({ accessToken, refreshToken }); isRefreshing =false;onRefreshed(accessToken);// 重试原请求 config.headers['Authorization']=`Bearer ${accessToken}`;returnapi(config);}).catch(err=>{// 刷新失败，跳转登录 isRefreshing =false; window.location.href ='/login';return Promise.reject(err);});}return Promise.reject(error);});exportdefault api;

要点说明

isRefreshing 和 subscribers 用于解决多个并发 401 时只发送一次刷新请求；
_retry 标记避免无限循环；
刷新失败后，需清除本地登录态并跳转到登录页。

5. 后端实现

5.1 基础依赖（pom.xml）

<dependencies><!-- Spring Boot Starter Web --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- MyBatis-Plus --><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.3.1</version></dependency><!-- MySQL 驱动 --><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId></dependency><!-- Redis --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency><!-- JWT --><dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt-api</artifactId><version>0.11.5</version></dependency><dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt-impl</artifactId><version>0.11.5</version><scope>runtime</scope></dependency><dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt-jackson</artifactId><version>0.11.5</version><scope>runtime</scope></dependency></dependencies>

5.2 数据库与实体（存储用户可选）

这里就简单模拟用户，仅有用户名和密码为例

-- 用户表（简化）CREATETABLE user_account ( id BIGINTPRIMARYKEYAUTO_INCREMENT, username VARCHAR(50)UNIQUENOTNULL, password VARCHAR(255)NOTNULL);

5.3 Redis 存储 Refresh Token

我们用 ·Redis· 的 String，Key 为 refresh:{userId}，Value 存 JSON { token, expireTime }

5.4 JWT 工具类

// JwtUtil.java@ComponentpublicclassJwtUtil{@Value("${jwt.secret}")privateString secret;@Value("${jwt.access.expire}")privatelong accessExpire;// ms@Value("${jwt.refresh.expire}")privatelong refreshExpire;// ms// 生成 Access Token（短期）publicStringgenerateAccessToken(Long userId){returnJwts.builder().setSubject(userId.toString()).setIssuedAt(newDate()).setExpiration(newDate(System.currentTimeMillis()+ accessExpire)).signWith(Keys.hmacShaKeyFor(secret.getBytes())).compact();}// 生成 Refresh Token（长期）publicStringgenerateRefreshToken(Long userId){returnJwts.builder().setSubject(userId.toString()).setIssuedAt(newDate()).setExpiration(newDate(System.currentTimeMillis()+ refreshExpire)).signWith(Keys.hmacShaKeyFor(secret.getBytes())).compact();}// 解析 TokenpublicClaimsparseToken(String token){returnJwts.parserBuilder().setSigningKey(secret.getBytes()).build().parseClaimsJws(token).getBody();}}

5.5 刷新服务

// AuthService.java@ServicepublicclassAuthService{@AutowiredprivateJwtUtil jwtUtil;@AutowiredprivateStringRedisTemplate redis;publicTokenslogin(String username,String password){// 1. 验证用户名密码（略，用 MyBatis-Plus 查询）Long userId =/* ... */;// 2. 生成双 TokenString accessToken = jwtUtil.generateAccessToken(userId);String refreshToken = jwtUtil.generateRefreshToken(userId);// 3. 保存到 RedisString key ="refresh:"+ userId; redis.opsForValue().set(key, refreshToken, jwtUtil.getRefreshExpire(),TimeUnit.MILLISECONDS);returnnewTokens(accessToken, refreshToken);}publicTokensrefresh(String refreshToken){// 1. 解析Claims claims = jwtUtil.parseToken(refreshToken);Long userId =Long.parseLong(claims.getSubject());// 2. Redis 校验String key ="refresh:"+ userId;String cached = redis.opsForValue().get(key);if(cached ==null||!cached.equals(refreshToken)){thrownewRuntimeException("Refresh Token 无效或已过期");}// 3. 生成新 TokenString newAccess = jwtUtil.generateAccessToken(userId);String newRefresh = jwtUtil.generateRefreshToken(userId);// 4. 覆盖 Redis redis.opsForValue().set(key, newRefresh, jwtUtil.getRefreshExpire(),TimeUnit.MILLISECONDS);returnnewTokens(newAccess, newRefresh);}}

5.6 控制器Controller

// AuthController.java@RestController@RequestMapping("/api/auth")publicclassAuthController{@AutowiredprivateAuthService authService;@PostMapping("/login")publicTokenslogin(@RequestBodyLoginReq req){return authService.login(req.getUsername(), req.getPassword());}@PostMapping("/refresh")publicTokensrefresh(@RequestBodyMap<String,String> body){return authService.refresh(body.get("refreshToken"));}}// DTOs@DataclassLoginReq{privateString username, password;}@Data@AllArgsConstructorclassTokens{privateString accessToken;privateString refreshToken;}

5.7 JWT 验证过滤器

由于验证并非本文的重点，小伙伴们可以参考博主的 《Spring Security》专栏学习，这里仅提供思路：
在每次请求拦截中，解析 Access Token 并将用户信息放入 SecurityContext，若过期则交由前端刷新逻辑处理。

6. 结语

本文详细介绍了 无感 Token 刷新 的核心原理，以及前端 Axios 拦截器与后端 Spring Boot + MyBatis-Plus + Redis 的完整示例代码。通过双 Token、Redis 校验与拦截重试，你可以在保证安全性的同时，给用户带来 无感登录过期刷新 的体验

后续可继续优化：

  • Refresh Token 滑动过期：每次刷新延长有效期；
  • Refresh Token 一次性使用：每个旧 Token 只能刷新一次；
  • 前端多 tab 协调：同域下可共享刷新状态，避免重复刷新；
  • 安全加固：结合 IP、UA 风控，防止 Token 被盗用。

希望本文能帮助你快速在项目中落地无感刷新方案，如果你在实践过程中有任何疑问或更好的扩展思路，欢迎在评论区留言，最后希望大家一键三连给博主一点点鼓励！

Read more

实现Python将csv数据导入到Neo4j

使用Py2neo库导入CSV数据到Neo4j 安装Py2neo库 确保已安装Py2neo库，可通过以下命令安装： pip install py2neo 建立Neo4j连接 创建与Neo4j数据库的连接： from py2neo import Graph graph = Graph("bolt://localhost:7687", auth=("username", "password")) 读取CSV文件 使用Pandas读取CSV文件： import pandas as pd data = pd.read_csv("data.csv") 创建节点和关系 根据CSV结构创建节点和关系： from py2neo import Node, Relationship for _, row

霜儿-汉服-造相Z-Turbo文旅融合：古镇AR导览中实时生成游客古装形象

霜儿-汉服-造相Z-Turbo文旅融合：古镇AR导览中实时生成游客古装形象 1. 引言：当古镇遇见AI，你的专属古装形象即刻生成 想象一下，你漫步在青石板铺就的古镇小巷，手机镜头对准自己，屏幕上瞬间出现一位身着精美汉服、置身于古风场景中的“你”。这不是简单的滤镜贴纸，而是由AI实时为你生成的、独一无二的古风艺术形象。这正是“霜儿-汉服-造相Z-Turbo”模型在文旅融合场景下的惊艳应用。 对于古镇、文化景区而言，如何让游客深度沉浸、留下独特记忆，一直是个挑战。传统的古装租赁拍照流程繁琐、耗时，且服装和场景选择有限。而“霜儿-汉服-造相Z-Turbo”模型，结合AR（增强现实）技术，为这个问题提供了一个充满想象力的解决方案：让游客在游览过程中，通过手机App实时生成自己的古装形象，并“置身”于虚拟的古风场景中，实现“一秒穿越”。 本文将带你深入了解，如何利用基于Xinference部署的“霜儿-汉服-造相Z-Turbo”文生图模型服务，结合Gradio构建的简易界面，打造一个古镇AR导览中的实时古装形象生成功能。我们将从模型部署、接口调用，到场景应用的全流程进行拆解，让你不仅能

OpenDroneMap 完整指南：从无人机图像到专业地图的终极教程

OpenDroneMap（ODM）是一个功能强大的开源工具包，专门用于将无人机、气球或风筝拍摄的普通照片转换为专业级的地理空间产品。无论您是测绘新手还是专业用户，都能通过本指南快速掌握这一革命性技术。 【免费下载链接】ODMA command line toolkit to generate maps, point clouds, 3D models and DEMs from drone, balloon or kite images. 📷 项目地址: https://gitcode.com/gh_mirrors/od/ODM 为什么选择OpenDroneMap？ 核心优势解析 OpenDroneMap最大的价值在于它能够将简单的2D航拍图像转化为多种专业地理数据产品： * 零成本入门：完全开源免费，无需昂贵的商业软件许可 * 跨平台兼容：支持Windows、macOS和Linux系统 * 处理多样化：支持普通相机、多光谱相机和热成像相机数据 * 自动化流程：从图像输入到成果输出，整个过程高度自动化

智能客服对话机器人设计全流程：从架构设计到生产环境部署

最近在做一个智能客服项目，从零开始搭建一个能实际处理用户问题的对话机器人，踩了不少坑，也积累了一些经验。今天就来聊聊从架构设计到最终部署上线的全流程，希望能给有类似需求的开发者一些参考。 1. 背景与痛点：为什么需要智能客服？ 传统的客服系统，无论是电话热线还是在线聊天，主要依赖人工坐席。这种方式有几个明显的痛点： * 人力成本高：7x24小时服务需要三班倒，人力成本巨大。 * 响应速度慢：高峰期排队严重，用户体验差。 * 服务质量不稳定：不同客服的业务熟练度和服务态度参差不齐。 * 知识难以沉淀：优秀的客服经验很难系统化地传承和复用。 而早期的“智能”客服，很多是基于关键词匹配的规则引擎。比如用户说“我要退款”，系统就回复一个预设的退款流程链接。这种方案的局限性非常大： * 理解能力弱：无法处理同义词、口语化表达和上下文关联。用户说“钱怎么退”和“我要退款”，在规则引擎里可能就是两条完全不同的规则。 * 维护成本高：业务规则一变，就需要人工添加大量新规则，容易产生规则冲突。 * 毫无灵活性：对话僵硬，无法进行多轮交互，用户体验像在和“人工智障”聊天。 正是这