小程序模板網(wǎng)

微信小程序之頁(yè)面攔截器

發(fā)布時(shí)間:2017-12-30 09:03 所屬欄目:小程序開(kāi)發(fā)教程

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

 
 
 

場(chǎng)景

  1. 小程序有52個(gè)頁(yè)面,其中13個(gè)頁(yè)面無(wú)需任何身份,另外39個(gè)頁(yè)面需要系統(tǒng)角色。對(duì)于這39個(gè)頁(yè)面,如果微信用戶(hù)沒(méi)有系統(tǒng)角色,則跳轉(zhuǎn)到登錄頁(yè)。
  2. 是否有系統(tǒng)角色信息需要通過(guò)異步請(qǐng)求來(lái)獲取。

需求分析&實(shí)現(xiàn)

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

使用過(guò)php的laravel框架的童鞋,肯定一下子就聯(lián)想到了laravel框架的http中間件:
HTTP 中間件提供一個(gè)方便的機(jī)制來(lái)過(guò)濾進(jìn)入應(yīng)用程序的 HTTP 請(qǐng)求,例如,Laravel 默認(rèn)包含了一個(gè)中間件來(lái)檢驗(yàn)用戶(hù)身份驗(yàn)證,如果用戶(hù)沒(méi)有經(jīng)過(guò)身份驗(yàn)證,中間件會(huì)將用戶(hù)導(dǎo)向登錄頁(yè)面,然而,如果用戶(hù)通過(guò)身份驗(yàn)證,中間件將會(huì)允許這個(gè)請(qǐng)求進(jìn)一步繼續(xù)前進(jìn)。當(dāng)然,除了身份驗(yàn)證之外,中間件也可以被用來(lái)執(zhí)行各式各樣的任務(wù),CORS 中間件負(fù)責(zé)替所有即將離開(kāi)程序的響應(yīng)加入適當(dāng)?shù)捻憫?yīng)頭,一個(gè)日志中間件可以記錄所有傳入應(yīng)用程序的請(qǐng)求。

令人憂桑的是,微信小程序并沒(méi)有提供針對(duì)Page實(shí)例的中間件機(jī)制。所以只能從Page實(shí)例的生命周期處下手。

對(duì)于onLoad,一個(gè)頁(yè)面只會(huì)調(diào)用一次;對(duì)于onShow,每次打開(kāi)頁(yè)面(比如小程序從后臺(tái)轉(zhuǎn)到前臺(tái))都會(huì)調(diào)用一次。

在onLoad或者onShow鉤子函數(shù)里,對(duì)用戶(hù)身份進(jìn)行校驗(yàn),通過(guò)后則拉取該頁(yè)面需要的數(shù)據(jù),否則跳轉(zhuǎn)到登錄頁(yè)。

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

不過(guò),每個(gè)頁(yè)面都要這樣寫(xiě),重復(fù)代碼好多啊,侵入性也強(qiáng)。不如用裝飾函數(shù)(高大上的說(shuō)法是裝飾者模式)來(lái)包裝一下:

//filter.js
function identityFilter(pageObj){
    if(pageObj.onShow){
        let _onShow = pageObj.onShow;
        pageObj.onShow = function(){
            service.identityCheck(()=>{
                //跳轉(zhuǎn)到登錄頁(yè)
                wx.redirectTo({
                    url: "/pages/common/login/login"
                });
            },()=>{
                //獲取頁(yè)面實(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用以提供過(guò)濾器方法,除了現(xiàn)有的用戶(hù)身份攔截,后續(xù)如果需要其他攔截,可以在這個(gè)文件增加。然后,在需要用戶(hù)身份攔截的小程序頁(yè)面代碼里,用filter.identityFilter處理一下就可以了:

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

使用Promise進(jìn)行優(yōu)化

上面的實(shí)現(xiàn)中,每次訪問(wèn)頁(yè)面,都會(huì)執(zhí)行一次獲取用戶(hù)身份的方法(就是上面代碼里的service. identityCheck )。其實(shí)沒(méi)有必要,在小程序啟動(dòng)的時(shí)候獲取一次就行了。也就是說(shuō),放在app.js的onLaunch方法里執(zhí)行。

每個(gè)小程序頁(yè)面實(shí)例化時(shí),一般也會(huì)執(zhí)行異步方法,用來(lái)獲取頁(yè)面需要的數(shù)據(jù)。關(guān)鍵在于,我們需要保證,頁(yè)面的異步方法 必須在 獲取用戶(hù)身份的異步請(qǐng)求 之后執(zhí)行。

毋容置疑,Promise最擅長(zhǎng)處理異步請(qǐng)求的執(zhí)行順序了。主子,快放代碼粗來(lái):

//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(){
            //改動(dòng)點(diǎn)
            appData.promise.then(()=>{
                //跳轉(zhuǎn)到登錄頁(yè)
                wx.redirectTo({
                    url: "/pages/common/login/login"
                });
            },()=>{
                //獲取頁(yè)面實(shí)例,防止this劫持
                let currentInstance = getPageInstance();
                _onShow.call(currentInstance);
            });
        }
    }
    return pageObj;
}

小結(jié)

基本實(shí)現(xiàn)了小程序頁(yè)面的用戶(hù)身份攔截器,但是比起laravel的http中間件還是遜色一些:

  1. 需要對(duì)每個(gè)頁(yè)面代碼包裝一層。
  2. 即使用戶(hù)身份校驗(yàn)不通過(guò),小程序也并不會(huì)阻塞頁(yè)面的渲染。假如獲取用戶(hù)身份的異步方法一分鐘才執(zhí)行完,小程序頁(yè)面還是會(huì)展示出來(lái),一分鐘之后才跳轉(zhuǎn)到登錄頁(yè)。需要自己增加邏輯,比如在這一分鐘內(nèi),頁(yè)面展示空白內(nèi)容。

嗯,對(duì)小程序的新特性保持關(guān)注,后面看看怎么改進(jìn)~



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/18321.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún):800182392 點(diǎn)擊咨詢(xún)
QQ在線咨詢(xún)