微信小程序如何處理token過期問題

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

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

先說結(jié)論

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

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

問題

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

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

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

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

1.定義檢查token過期的方法：

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

2.在每個請求接口的響應(yīng)中，調(diào)用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是否過期，如果過期則跳轉(zhuǎn)到登錄頁。
      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;
    }
  });
}

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

解決方案

統(tǒng)一網(wǎng)絡(luò)請求的入口，定義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過期，跳轉(zhuǎn)到登錄界面
        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")
 
//邏輯層發(fā)起網(wǎng)絡(luò)請求，只需要傳遞url和成功回調(diào)函數(shù)。這比以前更加簡潔。
function getActivities(success) {
    httpUtil.get('meetup/api/v1/activity/getActivityList?pageNo=1&pageSize=100', function(res) {
        success(res)
    })
}
 
module.exports = {
    getActivities : getActivities
}

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

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

我們可以使用Promise，省去在調(diào)用請求接口時，傳入回調(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過期，跳轉(zhuǎn)到登錄界面
          resolve(res)
        },
        fail:(err) => {
          console.log("請求失敗")
          reject(err)
        }
      })
    })
}

使用方法：

// service層，定義網(wǎng)絡(luò)接口
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)=>{ //鏈式調(diào)用，處理活動列表數(shù)據(jù)。
          if (res.data.code == "10000") {
          ...
          }
        })
        .catch((err) => { //統(tǒng)一捕獲異常。 上面then中的任意回調(diào)發(fā)送異常，會直接中斷調(diào)用鏈，在這里處理。
          console.log("get act and group failed...")
        })
    }},

總結(jié)

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

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

您可能感興趣的文章: