微信小程序之页面拦截器

场景

小程序有52个页面,其中13个页面无需任何身份,另外39个页面需要系统角色。对于这39个页面,如果微信用户没有系统角色,则跳转到登录页。
是否有系统角色信息需要通过异步请求来获取。

需求分析&实现

对需求进行抽象,其实要的就是一个过滤器,对小程序页面的访问进行过滤,符合条件的通过,不符合条件进行其他处理。

使用过php的laravel框架的童鞋,肯定一下子就联想到了laravel框架的http中间件:HTTP 中间件提供一个方便的机制来过滤进入应用程序的 HTTP 请求,例如,Laravel 默认包含了一个中间件来检验用户身份验证,如果用户没有经过身份验证,中间件会将用户导向登录页面,然而,如果用户通过身份验证,中间件将会允许这个请求进一步继续前进。当然,除了身份验证之外,中间件也可以被用来执行各式各样的任务,CORS 中间件负责替所有即将离开程序的响应加入适当的响应头,一个日志中间件可以记录所有传入应用程序的请求。

令人忧桑的是,微信小程序并没有提供针对Page实例的中间件机制。所以只能从Page实例的生命周期处下手。

对于onLoad,一个页面只会调用一次;对于onShow,每次打开页面(比如小程序从后台转到前台)都会调用一次。在onLoad或者onShow钩子函数里,对用户身份进行校验,通过后则拉取该页面需要的数据,否则跳转到登录页。

//orderDetail.js
onShow: function () {
    let that = this;
    //身份校验
    service.identityCheck(() => {
          //跳转到登录页
          wx.redirectTo({
            url: "/pages/common/login/login"
          });
        }, () => {    
          //获取页面数据等等      
          that.getDetail(this.orderId);
          ...
        }
   );
  },

不过,每个页面都要这样写,重复代码好多啊,侵入性也强。不如用装饰函数(高大上的说法是装饰者模式)来包装一下:

//filter.js
function identityFilter(pageObj){
    if(pageObj.onShow){
        let _onShow = pageObj.onShow;
        pageObj.onShow = function(){
            service.identityCheck(()=>{
                //跳转到登录页
                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用以提供过滤器方法,除了现有的用户身份拦截,后续如果需要其他拦截,可以在这个文件增加。然后,在需要用户身份拦截的小程序页面代码里,用filter.identityFilter处理一下就可以了:

//orderDetail.js
let filter = require('filter.js');
Page(filter.identityFilter({
    ...
    onShow: function () {
        //获取页面数据等等
        this.getDetail(this.orderId);
        //...
    },
    ...
}));

使用Promise进行优化

上面的实现中,每次访问页面,都会执行一次获取用户身份的方法(就是上面代码里的service. identityCheck )。其实没有必要,在小程序启动的时候获取一次就行了。也就是说,放在app.js的onLaunch方法里执行。

每个小程序页面实例化时,一般也会执行异步方法,用来获取页面需要的数据。关键在于,我们需要保证,页面的异步方法 必须在 获取用户身份的异步请求 之后执行。

毋容置疑,Promise最擅长处理异步请求的执行顺序了。主子,快放代码粗来:

//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(()=>{
                //跳转到登录页
                wx.redirectTo({
                    url: "/pages/common/login/login"
                });
            },()=>{
                //获取页面实例,防止this劫持
                let currentInstance = getPageInstance();
                _onShow.call(currentInstance);
            });
        }
    }
    return pageObj;
}

小结

基本实现了小程序页面的用户身份拦截器,但是比起laravel的http中间件还是逊色一些:

1、需要对每个页面代码包装一层。

2、即使用户身份校验不通过,小程序也并不会阻塞页面的渲染。假如获取用户身份的异步方法一分钟才执行完,小程序页面还是会展示出来,一分钟之后才跳转到登录页。需要自己增加逻辑,比如在这一分钟内,页面展示空白内容。

嗯,对小程序的新特性保持关注,后面看看怎么改进~

文章来源:http://www.wxapp-union.com/portal.php?mod=view&aid=2980

推荐阅读更多精彩内容

  • 场景 小程序有52个页面,其中13个页面无需任何身份,另外39个页面需要系统角色。对于这39个页面,如果微信用户没...
    独爱一乐拉面阅读 9,197评论 0 7
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 9,986评论 1 29
  • CSRF(Cross-site request forgery,中文为跨站请求伪造)是一种利用网站可信用户的权限去...
    mylxsw阅读 732评论 1 11
  • Getting Started Burp Suite 是用于攻击web 应用程序的集成平台。它包含了许多工具,并为...
    Eva_chenx阅读 25,744评论 0 13
  • 昨晚梦见你在我面前吹过的那么多的牛逼终于实现了一个,可是那时候我已经不在是你的她,已经没有那么多的奢望,你成功就好
    相逢是孤岛阅读 83评论 0 0
  • 六一快到了,我特别开心,因为学校举行义卖活动。 到了那天,我走进教室,老师说:“先看节目。” 我...
    妮妮弟弟阅读 94评论 1 1
  • 这年头谈论梅西先生是一件风险极高的事,因为另一个男人C罗的存在,反之亦然。这世间的事最怕的就是争抢,一旦争抢起来我...
    化浊阅读 60评论 0 0
  • hello,大家好,我是WT皮总,二手主机一直以来都非常火,于是我也装了一台二手神机玩玩看。 首先平台我选择的是第...
    8b09575b6c78阅读 1,515评论 0 2
  • 原创:红尘闲云闲云醉语 清晨,独立窗前,看视线中陌生的景致和熟悉的阳光。恍惚间,我若天外来客。 慢慢地走下楼,一边...
    红尘闲云阅读 47评论 0 0