Vue中使用axios+pinia实现token续期功能，自动刷新token

示例图

在前后端分离的项目中，token认证是常见的身份验证方式。然而token通常有有效期限制，如何在token过期时自动刷新并续期，是提升用户体验的关键。本文将详细介绍如何在Vue3项目中结合axios和pinia实现token自动续期功能。

1. 核心概念与实现原理

1.1 Token认证机制

• Access Token: 短期有效的访问令牌，用于API请求认证

• Refresh Token: 长期有效的刷新令牌，用于获取新的Access Token

• Token过期策略: Access Token过期时间较短（如2小时），Refresh Token过期时间较长（如7天）

1.2 自动续期流程

1. 检测到API返回401状态码（Token过期）

2. 使用Refresh Token请求新的Access Token

3. 更新本地存储的Token信息

4. 重新发起原始请求