微信小程序如何處理token過(guò)期問(wèn)題

更新時(shí)間：2021年10月22日 10:44:05 作者：ArmstrongZ

最近再做個(gè)項(xiàng)目，需要檢查token過(guò)期，跳轉(zhuǎn)到登錄頁(yè)面，要求用戶重新登錄，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

先說(shuō)結(jié)論

業(yè)務(wù)流程: 從網(wǎng)絡(luò)日志中檢查到token過(guò)期，則跳轉(zhuǎn)到登錄頁(yè)面，要求用戶重新登錄。

代碼邏輯：使用自定義的HttpUtil封裝wx.request API，全局捕獲過(guò)期token并自動(dòng)處理后，下發(fā)給上層業(yè)務(wù)。

問(wèn)題

Token過(guò)期的現(xiàn)象：

在網(wǎng)絡(luò)請(qǐng)求中，客戶端token會(huì)過(guò)段時(shí)間過(guò)期，使得后續(xù)的網(wǎng)絡(luò)請(qǐng)求失敗，拋出異常日志如下：

data: {code: "99997", date: 1634174831325, message: "TOKEN EXPIRED", status: "ERROR"}

小程序提供的API: wx.request 是非常簡(jiǎn)單，只能在請(qǐng)求響應(yīng)成功后的回調(diào)函數(shù)中開(kāi)發(fā)者自己去檢查token過(guò)期，常規(guī)的做法：

1.定義檢查token過(guò)期的方法：

function checkAuth(resp) {
  if(resp.data.code == '99997') { //我們服務(wù)器返回的token過(guò)期的code是99997，code可以和后臺(tái)自定義。
    wx.navigateTo({
      url: '/pages/login/login', //這里跳轉(zhuǎn)到登錄頁(yè)，要求用戶重新登錄
    })
    console.log("需要重新登錄......");
  }
}

2.在每個(gè)請(qǐng)求接口的響應(yīng)中，調(diào)用checkAuth（res）去捕獲token過(guò)期。

問(wèn)題代碼

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是否過(guò)期，如果過(guò)期則跳轉(zhuǎn)到登錄頁(yè)。
      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;
    }
  });
}

在上面的代碼中，每個(gè)接口都會(huì)有重復(fù)的代碼，如配置baseUrl，token，checkAuth()。所以這里我們可以進(jìn)一步去除重復(fù)代碼。

解決方案

統(tǒng)一網(wǎng)絡(luò)請(qǐng)求的入口，定義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) // 在此處統(tǒng)一攔截token過(guò)期，跳轉(zhuǎn)到登錄界面
        console.log(res)
        success(res)
      },
      fail:function(res){
        console.log("請(qǐng)求失敗")
        fail(res)
      }
    })
}
···
 
module.exports = {
    get: get,
    post: post
}

HttpUtil的使用場(chǎng)景：

const httpUtil= require("../common/http/HttpUtil")
 
//邏輯層發(fā)起網(wǎng)絡(luò)請(qǐng)求，只需要傳遞url和成功回調(diào)函數(shù)。這比以前更加簡(jiǎn)潔。
function getActivities(success) {
    httpUtil.get('meetup/api/v1/activity/getActivityList?pageNo=1&pageSize=100', function(res) {
        success(res)
    })
}
 
module.exports = {
    getActivities : getActivities
}

如上，在使用httpUtil時(shí)，處理token過(guò)期的過(guò)程是透明的，細(xì)節(jié)封裝到了內(nèi)部。同時(shí)業(yè)務(wù)方也省去了設(shè)置token，token過(guò)期處理，baseUrl等樣板代碼。

使用Promise封裝回調(diào)函數(shù)

我們可以使用Promise，省去在調(diào)用請(qǐng)求接口時(shí)，傳入回調(diào)函數(shù)。

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) // 在此處統(tǒng)一攔截token過(guò)期，跳轉(zhuǎn)到登錄界面
          resolve(res)
        },
        fail:(err) => {
          console.log("請(qǐng)求失敗")
          reject(err)
        }
      })
    })
}

使用方法：

// service層，定義網(wǎng)絡(luò)接口
function getActivities() {
    return HttpUtil.get({
        url: 'meetup/api/v1/activity/getActivityList?pageNo=1&pageSize=100'
    })
}
    /**
     * 加載活動(dòng)列表（其中先加載群組以得到活動(dòng)的頭像）
     */
    fetchGroupAndActivities: function(){
      if(this.data.isLogin) {
        var that = this
        getGroups() //先加載群組列表的頭像。
        .then((res)=>{
          if(res.data.code == "10000") { 
            ...
            return getActivities()  //其次，加載活動(dòng)列表
          }
        })
        .then((res)=>{ //鏈?zhǔn)秸{(diào)用，處理活動(dòng)列表數(shù)據(jù)。
          if (res.data.code == "10000") {
          ...
          }
        })
        .catch((err) => { //統(tǒng)一捕獲異常。 上面then中的任意回調(diào)發(fā)送異常，會(huì)直接中斷調(diào)用鏈，在這里處理。
          console.log("get act and group failed...")
        })
    }},

總結(jié)

封裝過(guò)程wx.requestAPI中，在HttpUtil內(nèi)部用Promise對(duì)象封裝baseUrl，token處理等，隱藏實(shí)現(xiàn)細(xì)節(jié)，對(duì)外提供統(tǒng)一接口和支持鏈?zhǔn)秸{(diào)用，這是常見(jiàn)的門面設(shè)計(jì)模式，缺點(diǎn)是違背了開(kāi)閉原則，如果新增一些攔截請(qǐng)求接口處理，則要修改原有的接口實(shí)現(xiàn)。后續(xù)可加一個(gè)中間層，作為攔截器，用于擴(kuò)展新功能。

到此這篇關(guān)于微信小程序如何處理token過(guò)期問(wèn)題的文章就介紹到這了,更多相關(guān)小程序token過(guò)期內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: