場景

1. 小程序有52個頁面，其中13個頁面無需任何身份，另外39個頁面需要系統角色。對于這39個頁面，如果微信用戶沒有系統角色，則跳轉到登錄頁。
2. 是否有系統角色信息需要通過異步請求來獲取。

需求分析&實現

 對(dui)需求進(jin)行抽象，其(qi)(qi)實要的(de)(de)就是一個過濾器，對(dui)小(xiao)程序頁面的(de)(de)訪問進(jin)行過濾，符合(he)條件的(de)(de)通過，不(bu)符合(he)條件進(jin)行其(qi)(qi)他處理。

使用過php的laravel框架的童鞋，肯定一下子就聯想到了laravel框架的http中間件:
HTTP 中間件提供一個方便的機制來過濾進入應用程序的 HTTP 請求，例如，Laravel 默認包含了一個中間件來檢驗用戶身份驗證，如果用戶沒有經過身份驗證，中間件會將用戶導向登錄頁面，然而，如果用戶通過身份驗證，中間件將會允許這個請求進一步繼續前進。當然，除了身份驗證之外，中間件也可以被用來執行各式各樣的任務，CORS 中間件負責替所有即將離開程序的響應加入適當的響應頭，一個日志中間件可以記錄所有傳入應用程序的請求。

令人憂桑(sang)的是，微信(xin)小程序并沒(mei)有(you)提供針對(dui)Page實(shi)例的中(zhong)間件機(ji)制(zhi)。所以只能從(cong)Page實(shi)例的生命周期處下(xia)手(shou)。

對于onLoad,一個(ge)頁面(mian)(mian)只會調用一次；對于onShow,每次打(da)開頁面(mian)(mian)(比如小程(cheng)序從后臺轉到前(qian)臺)都會調用一次。

在onLoad或者(zhe)onShow鉤子(zi)函數里(li)，對用戶身份進行(xing)校驗，通(tong)過后(hou)則拉取該頁(ye)面需要的數據，否則跳轉到登錄頁(ye)。

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

不過，每個頁面都要(yao)這樣(yang)寫，重復代碼好多(duo)啊，侵入(ru)性也強。不如用裝飾(shi)函數（高大上的說法是裝飾(shi)者模式）來包裝一下：

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

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

exports.identityFilter = identityFilter;

filter.js用以提供過濾器方法，除了現有的用戶身份攔截，后續如果需要其他攔截，可以在這個文件增加。然后，在需要用戶身份攔截的小程序頁面代碼里，用filter.identityFilter處理一下就可以了:

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

使用Promise進行優化

上面的實現中，每次訪問頁面，都會執行一次獲取用戶身份的方法（就是上面代碼里的service. identityCheck ）。其實沒(mei)有(you)必(bi)要，在小程序啟動(dong)的時候(hou)獲取一(yi)次就行了。也就是(shi)說，放在app.js的onLaunch方法里執行。

每個小程序頁面實例化時，一般也會執行異步方法，用來獲取頁面需要的數據。關鍵在于，我們需要保證，頁面的異步方法 必須在 獲取用戶身份的異步請求 之后執行。

毋容置疑，Promise最(zui)擅長處(chu)理異步請求的(de)執行順序了(le)。主(zhu)子，快放代碼粗來：

//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(){
            //改動點
            appData.promise.then(()=>{
                //跳轉到登錄(lu)頁
                wx.redirectTo({
                    url: "/pages/common/login/login"
                });
            },()=>{
                //獲取頁面實例，防止(zhi)this劫持
                let currentInstance = getPageInstance();
                _onShow.call(currentInstance);
            });
        }
    }
    return pageObj;
}

小結

基本實現(xian)了小(xiao)程序頁(ye)面的用戶(hu)身份攔截器，但(dan)是比起(qi)laravel的http中間(jian)件(jian)還(huan)是遜(xun)色一些：

1. 需要對每個頁面代碼包裝一層。
2. 即使用戶身份校驗不通過，小程序也并不會阻塞頁面的渲染。假如獲取用戶身份的異步方法一分鐘才執行完，小程序頁面還是會展示出來，一分鐘之后才跳轉到登錄頁。需要自己增加邏輯，比如在這一分鐘內，頁面展示空白內容。

嗯(ng)，對小程(cheng)序的新特性保持(chi)關注，后面(mian)看(kan)看(kan)怎么改進~