微信小程序如何处理token过期问题
曾強 时间:2022-10-05
先说结论
业务流程: 检测到token过期,则跳转到登录流程。
代码逻辑:使用HttpUtil封装wx.request API,全局捕获过期token并自动处理后,下发给上层业务。
问题
Token过期的现象:
在网络请求中,客户端token会过段时间过期,使得后续的网络请求失败,抛出异常日志如下:
data: {code: "99997", date: 1634174831325, message: "TOKEN EXPIRED", status: "ERROR"}
小程序提供的API: wx.request 是非常简单,只能在请求响应成功后的回调函数中开发者自己去检查token过期,常规的做法:
1.定义检查token过期的方法:
- function checkAuth(resp) {
- if(resp.data.code == '99997') { //我们服务器返回的token过期的code是99997,code可以和后台自定义。
- wx.navigateTo({
- url: '/pages/login/login', //这里跳转到登录页,要求用户重新登录
- })
- console.log("需要重新登录......");
- }
- }
2.在每个请求接口的响应中,调用checkAuth(res)去捕获token过期。
问题代码
- function createMatchImage(data, fun) {
- //console.log(getApp())
- console.log("token = " + getApp().getToken())
- wx.request({
- method: 'POST',
- url: conf.baseUrl + 'match/matchImages',
- data: data,
- header: {
- 'content-type': 'application/json',
- 'sessionKey': getApp().getToken()
- },
- success: function (res) {
- console.log(res)
- conf.checkAuth(res) // 判断token是否过期,如果过期则跳转到登录页。
- fun(res);
- }
- });
- }
-
- function getMatchImages(id, fun) {
- wx.request({
- ...
- success: function (res) {
- conf.checkAuth(res)
- ...
- }
- });
- }
-
- function deleteImage(id, fun) {
- ...
- wx.request({
- ...
- success: function (res) {
- conf.checkAuth(res)
- fun(res);
- //return res;
- }
- });
- }
在上面的代码中,每个接口都会有重复的代码,如配置baseUrl,token,checkAuth()。所以这里我们可以进一步去除重复代码。
解决方案
统一网络请求的入口,定义HttpUtil类。 封装wx.request方法。
-
- const get = (url, success, fail) => {
- var _token = getApp().getToken()
- wx.request({
- method:'GET',
- url: baseUrl + url,
- header:{
- 'Authorization': _token,
- 'content-type': 'application/json',
- },
- success:function(res) {
- checkAuth(res) // 在此处统一拦截token过期,跳转到登录界面
- console.log(res)
- success(res)
- },
- fail:function(res){
- console.log("请求失败")
- fail(res)
- }
- })
- }
- ···
-
- module.exports = {
- get: get,
- post: post
- }
HttpUtil的使用场景:
- const httpUtil= require("../common/http/HttpUtil")
-
- //逻辑层发起网络请求,只需要传递url和成功回调函数。这比以前更加简洁。
- function getActivities(success) {
- httpUtil.get('meetup/api/v1/activity/getActivityList?pageNo=1&pageSize=100', function(res) {
- success(res)
- })
- }
-
- module.exports = {
- getActivities : getActivities
- }
如上,在使用httpUtil时, 处理token过期的过程是透明的 ,细节封装到了内部。同时业务方也省去了设置token,token过期处理,baseUrl等样板代码。
使用Promise封装回调函数
我们可以使用Promise,省去在调用请求接口时,传入回调函数。
- const get = (params) => {
- var _token = getApp().getToken()
- return new Promise((resolve, reject) => {
- wx.request({
- method:'GET',
- url: concatUrl(params),
- header:{
- 'Authorization': _token,
- 'content-type': 'application/json',
- },
- success: (res) => {
- checkAuth(res) // 在此处统一拦截token过期,跳转到登录界面
- resolve(res)
- },
- fail:(err) => {
- console.log("请求失败")
- reject(err)
- }
- })
- })
- }
使用方法:
- // service层,定义网络接口
- function getActivities() {
- return HttpUtil.get({
- url: 'meetup/api/v1/activity/getActivityList?pageNo=1&pageSize=100'
- })
- }
-
- fetchGroupAndActivities: function(){
- if(this.data.isLogin) {
- var that = this
- getGroups() //先加载群组列表的头像。
- .then((res)=>{
- if(res.data.code == "10000") {
- ...
- return getActivities() //其次,加载活动列表
- }
- })
- .then((res)=>{ //链式调用,处理活动列表数据。
- if (res.data.code == "10000") {
- 特别声明:本站部分内容收集于互联网是出于更直观传递信息的目的。该内容版权归原作者所有,并不代表本站赞同其观点和对其真实性负责。如该内容涉及任何第三方合法权利,请及时与824310991@qq.com联系,我们会及时反馈并处理完毕。