Vue Pure Admin 项目中无感刷新 Token 的二次获取问题解析

问题背景

在基于 Vue Pure Admin 框架开发的后台管理系统中，用户登录后会获取 accessToken 和 refreshToken 两种令牌。accessToken 用于常规接口请求认证，而 refreshToken 用于在 accessToken 过期时重新获取新的令牌对，实现无感刷新认证状态的功能。

问题现象

开发人员发现一个特定的令牌刷新流程异常：

1. 用户首次登录获取 refreshToken
2. 等待 accessToken 过期
3. 访问页面触发无感刷新，成功获取新 refreshToken
4. 再次等待 accessToken 过期
5. 第二次尝试无感刷新时，系统未能正确传递 refreshToken 参数，导致刷新失败

技术分析

令牌刷新机制原理

Vue Pure Admin 采用双令牌机制实现无感认证刷新：

• accessToken：短期有效，用于常规请求认证
• refreshToken：长期有效，专门用于获取新的令牌对

当 accessToken 过期时，系统会自动使用 refreshToken 向认证服务器请求新的令牌对，整个过程对用户透明。

问题根源

通过分析请求日志发现：

• 第一次无感刷新时，请求中正确携带了 refreshToken 参数
• 第二次无感刷新时，请求中缺失了 refreshToken 参数

这表明系统在令牌刷新过程中，可能存在 refreshToken 存储或传递的逻辑缺陷，导致第二次刷新时无法正确获取到有效的 refreshToken。

解决方案

项目维护团队已通过代码提交修复了此问题。修复的核心思路是确保：

1. 每次成功刷新令牌后，新的 refreshToken 都能被正确存储
2. 后续的刷新请求能够可靠地获取到最新的 refreshToken
3. 完善令牌的持久化机制，避免在页面跳转等场景下丢失

最佳实践建议

对于使用类似认证机制的开发者，建议：

1. 实现可靠的令牌存储方案，考虑使用 localStorage 配合内存存储
2. 添加令牌有效性检查逻辑，避免使用过期的 refreshToken
3. 记录详细的认证日志，便于排查问题
4. 考虑添加失败重试机制，提高用户体验
5. 在开发阶段模拟各种令牌过期场景，全面测试认证流程

通过这次问题的分析和解决，Vue Pure Admin 的认证机制得到了进一步完善，为开发者提供了更稳定可靠的无感认证体验。