在Taro进行多端开发时,用户认证是维系应用核心功能的关键环节，而Token作为用户身份的凭证，其有效性至关重要，当后端返回“Token失效”或“401 Unauthorized”等错误时，若处理不当，会直接导致用户操作中断，体验受损，构建一套健壮、无感的Token管理机制，是每个Taro项目都需要面对的课题。
Token失效的常见原因
了解问题的根源是解决问题的第一步,Token失效通常由以下几个因素导致：
- Token自然过期：这是最常见的原因，出于安全考虑，服务端颁发的Access Token通常有效期较短，如几小时或一天，到期后自动失效。
- 客户端存储异常：用户手动清理了应用缓存、数据，或在某些小程序环境下，存储空间被系统回收，导致本地Token丢失。
- 服务端主动注销：管理员在后台将该用户踢下线，或用户在另一个设备登录时，服务端策略会使当前设备的Token失效。
- 用户修改密码：出于安全设计，当用户修改密码后，服务端会使其所有旧的Token立即失效。
- 逻辑处理疏漏：在请求封装时，忘记将Token添加到请求头，或没有对401状态码进行统一的拦截处理，导致错误直接暴露在业务层。
核心解决方案：构建请求与响应拦截器
在Taro项目中,最佳实践是使用拦截器来集中处理Token的添加和失效后的响应，无论是使用官方的Taro.request还是封装的第三方库（如taro-axios），拦截器都是标准配置。
请求拦截器
在发送网络请求之前，通过请求拦截器统一从本地存储（如Taro.getStorageSync('token')）中读取Token，并将其添加到HTTP请求头中，通常字段为Authorization。
// 伪代码示例
const interceptor = function (chain) {
const requestParams = chain.requestParams
const token = Taro.getStorageSync('token')
if (token) {
requestParams.header = {
...requestParams.header,
'Authorization': `Bearer ${token}`
}
}
return chain.proceed(requestParams)
}
Taro.addInterceptor(interceptor)
响应拦截器 响应拦截器是处理Token失效的核心，当服务器返回401状态码时，拦截器会捕获这个错误，并触发后续处理逻辑，而不是将错误抛给每个具体的业务请求。
进阶策略：无感刷新Token机制
为了提升用户体验,“无感刷新”是处理Token失效的黄金标准，它依赖一个生命周期更长的Refresh Token，其工作流程如下：
| 步骤 | 触发条件 | 执行动作 |
|---|---|---|
| 1 | API请求返回401 | 拦截器捕获401错误，暂停原始请求。 |
| 2 | 检查本地Refresh Token是否存在 |
若不存在，直接跳转登录页。 |
| 3 | 使用Refresh Token请求新的Access Token |
发送一个专门的刷新Token接口请求。 |
| 1 | 刷新成功 | 将新Token存入本地，并用新Token重新发起之前失败的原始请求，对用户而言，这个过程是透明的。 |
| 2 | 刷新失败 | 说明Refresh Token也过期了，清除本地所有认证信息，强制用户跳转到登录页面重新登录。 |
在实现时,务必注意防止多个失效请求同时触发刷新逻辑，可以通过设置一个全局的isRefreshing标志位和失败请求队列来解决，当第一个请求触发刷新时，后续的401请求都进入队列等待，待刷新成功后，统一用新Token重发队列中的所有请求。
调试与最佳实践
- 日志记录：在拦截器中关键节点（如获取Token、刷新Token、跳转登录）添加
console.log，便于追踪问题。 - 状态管理：将登录状态、用户信息和Token存储在全局状态管理库（如Redux、Zustand）中，便于跨组件、跨页面同步认证状态。
- 平台差异：虽然Taro统一了API，但在调试时，H5端可使用浏览器开发者工具，小程序端则需使用微信开发者工具的网络面板，两者在查看存储和网络请求上略有不同。
相关问答FAQs
问题1：如果刷新用的 Refresh Token 也过期了怎么办？
解答： 这是认证链路的终点，意味着用户的会话已完全结束，应用必须执行“强制登出”流程，具体操作包括：清除本地存储的Access Token、Refresh Token、用户信息等所有认证相关数据；重置全局登录状态；然后通过编程式导航（如Taro.reLaunch({url: '/pages/login/index'})）将用户引导至登录页面，要求其重新输入账号密码进行登录，这是保障账户安全的必要措施。
问题2：在微信小程序和H5中，处理Token失效有什么需要注意的差异？
解答： 主要差异体现在存储限制和调试环境上，在存储方面，微信小程序的本地存储（wx.setStorageSync）有大小上限（通常为10MB），而H5的localStorage大小限制一般为5MB左右，但实际大小可能因浏览器而异，虽然Taro的Taro.setStorageSync做了统一，但仍需注意存储数据量，避免因超限导致存储失败，在调试方面，H5可以直接在浏览器开发者工具的Application和Network面板中查看Storage和请求详情，非常直观，而小程序则必须在微信开发者工具中进行调试，使用它的Storage和网络面板来排查问题，两者界面和功能有一定区别，需要开发者分别熟悉。