原生微信小程序无感刷新token
时间: 2025-02-17 21:03:00 浏览: 68
### 微信小程序中实现无感刷新Token的方法
在微信小程序开发过程中,为了确保用户体验流畅并解决Token过期问题,在不影响用户操作的情况下自动刷新Token是非常重要的功能之一。以下是具体实现方法:
#### 使用全局拦截器处理请求
通过设置网络请求的全局拦截器来捕获所有API调用前后的状态变化。当检测到因Token失效而返回特定错误码时(通常为`401 Unauthorized`),立即触发Token刷新逻辑。
```javascript
import { $http } from '@weixin-js-sdk/request';
// 添加请求前置处理器
$http.beforeRequest((config) => {
const token = wx.getStorageSync('accessToken');
config.header.Authorization = `Bearer ${token}`;
return config;
});
// 添加响应后置处理器
$http.afterResponse(async (response, options) => {
if(response.statusCode === 401){
try{
await refreshToken();
// 将原请求重新发送一次
Object.assign(options.headers, {'Authorization': 'Bearer '+wx.getStorageSync('newAccessToken')});
return await $http.request(options);
}
catch(error){
console.error("Failed to refresh token", error);
throw new Error("Unauthorized");
}
}
return response.data;
});
```
此部分代码展示了如何利用HTTP库中的钩子函数监听每次发出的数据交互行为,并针对未授权访问作出相应措施[^1]。
#### 刷新Token的具体流程
定义一个名为`refreshToken()`异步函数用于执行实际获取新令牌的操作。该过程涉及向服务器端提交旧版凭证换取新版认证信息,并将其保存至本地存储以便后续使用。
```javascript
async function refreshToken(){
let res = await uni.login({
provider: "weixin"
});
var data={
code :res.code,
grant_type:'refresh_token',
old_access_token:wx.getStorageSync('accessToken')
};
const result=await $http.post('/api/auth/refresh-token',data);
if(result.status==200){
wx.setStorage({key:"accessToken",data:result.new_access_token});
// 更新其他可能依赖于access_token的地方...
}else{
throw new Error(`Refresh failed with status:${result.status}`);
}
}
```
上述脚本片段说明了怎样借助微信提供的登录接口以及自定义的服务端点完成安全可靠的Token更新机制[^2]。
阅读全文
相关推荐















