成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

微信小程序之頁面攔截器

Stardustsky / 2621人閱讀

摘要：對于這個頁面，如果微信用戶沒有系統(tǒng)角色，則跳轉(zhuǎn)到登錄頁。令人憂桑的是，微信小程序并沒有提供針對實例的中間件機制。即使用戶身份校驗不通過，小程序也并不會阻塞頁面的渲染。

場景

小程序有52個頁面，其中13個頁面無需任何身份，另外39個頁面需要系統(tǒng)角色。對于這39個頁面，如果微信用戶沒有系統(tǒng)角色，則跳轉(zhuǎn)到登錄頁。

是否有系統(tǒng)角色信息需要通過異步請求來獲取。

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

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

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

令人憂桑的是，微信小程序并沒有提供針對Page實例的中間件機制。所以只能從Page實例的生命周期處下手。

對于onLoad,一個頁面只會調(diào)用一次；對于onShow,每次打開頁面(比如小程序從后臺轉(zhuǎn)到前臺)都會調(diào)用一次。

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

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

不過，每個頁面都要這樣寫，重復(fù)代碼好多啊，侵入性也強。不如用裝飾函數(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"
                });
            },()=>{
                //獲取頁面實例，防止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ù)如果需要其他攔截，可以在這個文件增加。然后，在需要用戶身份攔截的小程序頁面代碼里，用filter.identityFilter處理一下就可以了:

//orderDetail.js
let filter = require("filter.js");
Page(filter.identityFilter({
    ...
    onShow: function () {
        //獲取頁面數(shù)據(jù)等等
        this.getDetail(this.orderId);
        //...
    },
    ...
}));
使用Promise進行優(yōu)化

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

每個小程序頁面實例化時，一般也會執(zhí)行異步方法，用來獲取頁面需要的數(shù)據(jù)。關(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(){
            //改動點
            appData.promise.then(()=>{
                //跳轉(zhuǎn)到登錄頁
                wx.redirectTo({
                    url: "/pages/common/login/login"
                });
            },()=>{
                //獲取頁面實例，防止this劫持
                let currentInstance = getPageInstance();
                _onShow.call(currentInstance);
            });
        }
    }
    return pageObj;
}
小結(jié)

基本實現(xiàn)了小程序頁面的用戶身份攔截器，但是比起laravel的http中間件還是遜色一些：

需要對每個頁面代碼包裝一層。

即使用戶身份校驗不通過，小程序也并不會阻塞頁面的渲染。假如獲取用戶身份的異步方法一分鐘才執(zhí)行完，小程序頁面還是會展示出來，一分鐘之后才跳轉(zhuǎn)到登錄頁。需要自己增加邏輯，比如在這一分鐘內(nèi)，頁面展示空白內(nèi)容。

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88397.html

相關(guān)文章

  • Taro 優(yōu)秀學(xué)習(xí)資源匯總

    摘要：多端統(tǒng)一開發(fā)框架優(yōu)秀學(xué)習(xí)資源匯總官方資源項目倉庫官方文檔項目倉庫官方文檔微信小程序官方文檔百度智能小程序官方文檔支付寶小程序官方文檔字節(jié)跳動小程序官方文檔文章教程不敢閱讀包源碼帶你揭秘背后的哲學(xué)從到構(gòu)建適配不同端微信小程序等的應(yīng)用小程序最 Awesome Taro 多端統(tǒng)一開發(fā)框架 Taro 優(yōu)秀學(xué)習(xí)資源匯總 showImg(https://segmentfault.com/img/r...

    toddmark 評論0 收藏0

  • 微信小程序數(shù)據(jù)統(tǒng)計和錯誤統(tǒng)計的實現(xiàn)

    摘要：同時，還要攔截微信發(fā)生網(wǎng)絡(luò)請求的方法，這樣可以拿到網(wǎng)絡(luò)請求相關(guān)的數(shù)據(jù)，最后，為了能統(tǒng)計到錯誤，還需要攔截微信發(fā)生錯誤的方法。 某些情況下我們需要對小程序某些用戶的行為進行數(shù)據(jù)進行統(tǒng)計，比如統(tǒng)計某個頁面的UV,PV等，統(tǒng)計某個功能的使用情況等。好讓產(chǎn)品對于產(chǎn)品的整個功能有所了解。在網(wǎng)頁里，我們很多人都用過谷歌統(tǒng)計，小程序里也有一些第三方數(shù)據(jù)統(tǒng)計的庫, 比如騰訊的MTA等等。但是，第三方的...

    jerryloveemily 評論0 收藏0

  • 微信小程序mpvue框架總結(jié)

    摘要：原理架構(gòu)作為與之間相互通信的橋梁部分在環(huán)境中注入的實現(xiàn)代碼，包含了協(xié)議的拼裝發(fā)送參數(shù)池回調(diào)池等一些基礎(chǔ)功能。部分在客戶端中的功能映射代碼，實現(xiàn)了攔截與解析環(huán)境信息的注入通用功能映射等功能。 原理架構(gòu) JSBridge 作為native 與 JS 之間相互通信的橋梁JS部分(bridge): 在JS環(huán)境中注入 bridge 的實現(xiàn)代碼，包含了協(xié)議的拼裝/發(fā)送/參數(shù)池/回調(diào)池等一些基礎(chǔ)功能...

    microelec 評論0 收藏0

  • 微信小程序開發(fā)中的二三事之網(wǎng)易云信IMSDK DEMO

    摘要：傳統(tǒng)的網(wǎng)頁編程采用的三劍客來實現(xiàn)，在微信小程序中同樣有三劍客。觀察者模式不難實現(xiàn)，重點是如何在微信小程序中搭配其特有的生命周期來使用。交互事件傳統(tǒng)的事件傳遞類型有冒泡型與捕獲型，微信小程序中自然也有。 本文由作者鄒永勝授權(quán)網(wǎng)易云社區(qū)發(fā)布。 簡介為了更好的展示我們即時通訊SDK強悍的能力，網(wǎng)易云信IM SDK微信小程序DEMO的開發(fā)就提上了日程。用產(chǎn)品的話說就是: 云信 IM 小程序 S...

    weij 評論0 收藏0

  • JS實現(xiàn)監(jiān)控微信小程序

    摘要：博客地址使用模塊化工具打包自己開發(fā)的庫文章中有提到，當(dāng)時需要寫一個，監(jiān)控小程序的后臺接口調(diào)用和頁面報錯，今天就來說下實現(xiàn)原理吧原理之前也做過瀏覽器端的數(shù)據(jù)埋點上報，其實原理大同小異通過劫持原始方法，獲取需要上報的數(shù)據(jù)，最后再執(zhí)行原始方法，這 博客地址 《使用模塊化工具打包自己開發(fā)的JS庫》文章中有提到，當(dāng)時需要寫一個SDK，監(jiān)控小程序的后臺接口調(diào)用和頁面報錯，今天就來說下實現(xiàn)原理吧！ ...

    Cheriselalala 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<