這篇文章主要介紹了微信小程式之頁攔截器的範(fàn)例程式碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟著小編過來看看吧

場景

• #小程式有52個(gè)頁面，其中13個(gè)頁面無需任何身份，另外39個(gè)頁面需要係統(tǒng)角色。對於這39個(gè)頁面，如果微信使用者沒有系統(tǒng)角色，則跳到登入頁。

• 是否有系統(tǒng)角色資訊需要透過非同步請求來取得。

需求分析&實(shí)作

對需求進(jìn)行抽象，其實(shí)要的就是一個(gè)過濾器，對小程式頁面的訪問進(jìn)行過濾，符合條件的通過，不符合條件進(jìn)行其他處理。

使用過php的laravel框架的童鞋，肯定一下子就聯(lián)想到了laravel框架的http中間件:

HTTP 中間件提供一個(gè)方便的機(jī)制來過濾進(jìn)入應(yīng)用程序的HTTP 請求，例如，Laravel 預(yù)設(shè)包含了一個(gè)中間件來檢驗(yàn)用戶身份驗(yàn)證，如果用戶沒有經(jīng)過身份驗(yàn)證，中間件會將用戶導(dǎo)向登錄頁面，然而，如果用戶通過身份驗(yàn)證，中間件將會允許這個(gè)請求進(jìn)一步繼續(xù)前進(jìn)。當(dāng)然，除了身份驗(yàn)證之外，中間件也可以被用來執(zhí)行各式各樣的任務(wù)，CORS 中間件負(fù)責(zé)替所有即將離開程序的響應(yīng)加入適當(dāng)?shù)捻憫?yīng)頭，一個(gè)日誌中間件可以記錄所有傳入應(yīng)用程序的請求。

令人憂桑的是，微信小程式並沒有提供針對Page實(shí)例的中間件機(jī)制。所以只能從Page實(shí)例的生命週期下手。

對於onLoad,一個(gè)頁面只會呼叫一次；對於onShow,每次開啟頁面(例如小程式從後臺轉(zhuǎn)到前臺)都會呼叫一次。

在onLoad或onShow鉤子函數(shù)裡，對使用者身分進(jìn)行校驗(yàn)，透過後則拉取該頁面所需的數(shù)據(jù)，否則跳到登入頁。

//orderDetail.js
onShow: function () {
  let that = this;
  //身份校驗(yàn)
  service.identityCheck(() => {
     //跳轉(zhuǎn)到登錄頁
     wx.redirectTo({
      url: "/pages/common/login/login"
     });
    }, () => {  
     //獲取頁面數(shù)據(jù)等等   
     that.getDetail(this.orderId);
     ...
    }
  );
 },

不過，每個(gè)頁面都要這樣寫，重複程式碼好多啊，侵入性也強(qiáng)。不如用裝飾函數(shù)（高大上的說法是裝飾者模式）來包裝一下：

//filter.js
function identityFilter(pageObj){
  if(pageObj.onShow){
    let _onShow = pageObj.onShow;
    pageObj.onShow = function(){
      service.identityCheck(()=>{
        //跳轉(zhuǎn)到登錄頁
        wx.redirectTo({
          url: "/pages/common/login/login"
        });
      },()=>{
        //獲取頁面實(shí)例，防止this劫持
        let currentInstance = getPageInstance();
        _onShow.call(currentInstance);
      });
    }
  }
  return pageObj;
}

function getPageInstance(){
  var pages = getCurrentPages();
  return pages[pages.length - 1];
}

exports.identityFilter = identityFilter;

filter.js用以提供過濾器方法，除了現(xiàn)有的用戶身份攔截，後續(xù)如果需要其他攔截，可以在這個(gè)檔案增加。然後，在需要使用者身分?jǐn)r截的小程式頁面程式碼裡，用filter.identityFilter處理一下就可以了:

//orderDetail.js
let filter = require('filter.js');
Page(filter.identityFilter({
  ...
  onShow: function () {
    //獲取頁面數(shù)據(jù)等等
    this.getDetail(this.orderId);
    //...
  },
  ...
}));

使用Promise進(jìn)行最佳化

#上面的實(shí)作中，每次造訪頁面，都會執(zhí)行一次取得使用者身分的方法（就是上面程式碼裡的service. identityCheck ）。其實(shí)沒有必要，在小程式啟動的時(shí)候取得一次就行了。也就是說，放在app.js的onLaunch方法裡執(zhí)行。

每個(gè)小程式頁面實(shí)例化時(shí)，一般也會執(zhí)行非同步方法，用來取得頁面所需的資料。關(guān)鍵在於，我們需要保證，頁面的非同步方法 必須在 取得使用者身分的非同步請求 之後執(zhí)行。

毋容置疑，Promise最擅長處理非同步請求的執(zhí)行順序了。主子，快放程式碼粗來：

//app.js
App({
  onLaunch:function(){
    let p = new Promise(function(resolve,reject){
      service.identityCheck(resolve,reject);
    });
    this.globalData.promise = p; 
  },
  ...
  globalData: {
    promise:null,
  }  
});

//filter.js
const appData = getApp().globalData;
function identityFilter(pageObj){
  if(pageObj.onShow){
    let _onShow = pageObj.onShow;
    pageObj.onShow = function(){
      //改動點(diǎn)
      appData.promise.then(()=>{
        //跳轉(zhuǎn)到登錄頁
        wx.redirectTo({
          url: "/pages/common/login/login"
        });
      },()=>{
        //獲取頁面實(shí)例，防止this劫持
        let currentInstance = getPageInstance();
        _onShow.call(currentInstance);
      });
    }
  }
  return pageObj;
}

小結(jié)

基本上實(shí)作了小程式頁面的使用者身分?jǐn)r截器，但是比起laravel的http中間件還是遜色一些：

• 需要對每個(gè)頁面程式碼包裝一層。

• 即使使用者身分校驗(yàn)不通過，小程式也不會阻塞頁面的渲染。若要取得使用者身分的非同步方法一分鐘才執(zhí)行完，小程式頁面還是會展示出來，一分鐘之後才跳到登入頁。需要自己增加邏輯，例如在這一分鐘內(nèi)，頁面展示空白內(nèi)容。

以上是微信小程式開發(fā)頁面攔截器的詳解的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！