微信小程序如何处理token过期问题

目录

• 先说结论

• 问题

• 解决方案

• 使用Promise封装回调函数

• 总结

先说结论

业务流程:  从网络日志中检查到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") {
         ...
         }
       })
       .catch((err) => { //统一捕获异常。 上面then中的任意回调发送异常，会直接中断调用链，在这里处理。
         console.log("get act and group failed...")
       })
   }},

总结

封装过程wx.requestAPI中，在HttpUtil内部用Promise对象封 * aseUrl，token处理等，隐藏实现细节，对外提供统一接口和支持链式调用，这是常见的门面设计模式，缺点是违背了开闭原则，如果新增一些拦截请求接口处理，则要修改原有的接口实现。后续可加一个中间层，作为 * ，用于扩展新功能。

来源：https://blog.csdn.net/zengqiang11111/article/details/120758488