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

 更新时间:2021年10月22日 10:44:05   作者:ArmstrongZ  
最近再做个项目,需要检查token过期,跳转到登录页面,要求用户重新登录,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

先说结论

业务流程:  从网络日志中检查到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对象封装baseUrl,token处理等,隐藏实现细节,对外提供统一接口和支持链式调用,这是常见的门面设计模式,缺点是违背了开闭原则,如果新增一些拦截请求接口处理,则要修改原有的接口实现。后续可加一个中间层,作为拦截器,用于扩展新功能。

到此这篇关于微信小程序如何处理token过期问题的文章就介绍到这了,更多相关小程序token过期内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javascript动态创建表格及添加数据实例详解

    javascript动态创建表格及添加数据实例详解

    这篇文章主要介绍了javascript动态创建表格及添加数据,以实例形式分析了javascript动态创建表格的常用方法,包括不兼容IE6与兼容IE6的实现方法,非常具有实用价值,需要的朋友可以参考下
    2015-05-05
  • ExtJS实现文件下载的方法实例

    ExtJS实现文件下载的方法实例

    这篇文章介绍了ExtJS实现文件下载的方法实例,有需要的朋友可以参考一下
    2013-11-11
  • js实现透明度渐变效果的方法

    js实现透明度渐变效果的方法

    这篇文章主要介绍了js实现透明度渐变效果的方法,涉及javascript实现渐变效果的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • javascript二维数组转置实例

    javascript二维数组转置实例

    这篇文章主要介绍了javascript二维数组转置方法,实例分析了数组行列交换的转置技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • 原生js jquery ajax请求以及jsonp的调用方法

    原生js jquery ajax请求以及jsonp的调用方法

    下面小编就为大家带来一篇原生js jquery ajax请求以及jsonp的调用方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 深入理解JavaScript内存管理和GC算法

    深入理解JavaScript内存管理和GC算法

    这篇文章主要介绍了深入理解JavaScript内存管理和GC算法,下面文章主要讲解JavaScript的垃圾回收机制以及常用的垃圾回收算法;还讲解了V8引擎中的内存管理,最后介绍了Performance工具如何使用
    2022-07-07
  • js实现无需数据库的县级以上联动行政区域下拉控件

    js实现无需数据库的县级以上联动行政区域下拉控件

    县级以上联动行政区域下拉控件,想必大家对此也有所熟悉,本文为大家介绍下使用js实现无需数据库的联动下拉控件,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-08-08
  • webpack结合express实现自动刷新的方法

    webpack结合express实现自动刷新的方法

    这篇文章主要给大家介绍了关于webpack结合express实现自动刷新的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用webpack具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • axios概念介绍和基本使用

    axios概念介绍和基本使用

    axios是一个基于Promise用于浏览器和nodejs的HTTP客户端,下面这篇文章主要给大家介绍了关于axios概念介绍和基本使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • 微信小程序实现多选删除列表数据功能示例

    微信小程序实现多选删除列表数据功能示例

    这篇文章主要介绍了微信小程序实现多选删除列表数据功能,涉及微信小程序列表数据读取、显示、删除等相关操作技巧,需要的朋友可以参考下
    2019-01-01

最新评论