微信小程序之页面拦截器

Stardustsky 发布于2019-08-21 16:19 / 2699人阅读

摘要：对于这个页面，如果微信用户没有系统角色，则跳转到登录页。令人忧桑的是，微信小程序并没有提供针对实例的中间件机制。即使用户身份校验不通过，小程序也并不会阻塞页面的渲染。

场景

小程序有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中间件还是逊色一些：

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

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

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

云服务器 GPU云服务器微信小程序微信小程序支付微信小程序部署微信小程序搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88397.html

Taro 优秀学习资源汇总

摘要：多端统一开发框架优秀学习资源汇总官方资源项目仓库官方文档项目仓库官方文档微信小程序官方文档百度智能小程序官方文档支付宝小程序官方文档字节跳动小程序官方文档文章教程不敢阅读包源码带你揭秘背后的哲学从到构建适配不同端微信小程序等的应用小程序最 Awesome Taro 多端统一开发框架 Taro 优秀学习资源汇总 showImg(https://segmentfault.com/img/r...

toddmark 2019-08-23 18:02 评论0 收藏0
微信小程序数据统计和错误统计的实现

摘要：同时，还要拦截微信发生网络请求的方法，这样可以拿到网络请求相关的数据，最后，为了能统计到错误，还需要拦截微信发生错误的方法。某些情况下我们需要对小程序某些用户的行为进行数据进行统计，比如统计某个页面的UV,PV等，统计某个功能的使用情况等。好让产品对于产品的整个功能有所了解。在网页里，我们很多人都用过谷歌统计，小程序里也有一些第三方数据统计的库, 比如腾讯的MTA等等。但是，第三方的...

jerryloveemily 2019-08-23 18:18 评论0 收藏0
微信小程序mpvue框架总结

摘要：原理架构作为与之间相互通信的桥梁部分在环境中注入的实现代码，包含了协议的拼装发送参数池回调池等一些基础功能。部分在客户端中的功能映射代码，实现了拦截与解析环境信息的注入通用功能映射等功能。原理架构 JSBridge 作为native 与 JS 之间相互通信的桥梁JS部分(bridge): 在JS环境中注入 bridge 的实现代码，包含了协议的拼装/发送/参数池/回调池等一些基础功能...

microelec 2019-08-23 18:32 评论0 收藏0
微信小程序开发中的二三事之网易云信IMSDK DEMO

摘要：传统的网页编程采用的三剑客来实现，在微信小程序中同样有三剑客。观察者模式不难实现，重点是如何在微信小程序中搭配其特有的生命周期来使用。交互事件传统的事件传递类型有冒泡型与捕获型，微信小程序中自然也有。本文由作者邹永胜授权网易云社区发布。简介为了更好的展示我们即时通讯SDK强悍的能力，网易云信IM SDK微信小程序DEMO的开发就提上了日程。用产品的话说就是: 云信 IM 小程序 S...

weij 2019-06-28 11:05 评论0 收藏0
JS实现监控微信小程序

摘要：博客地址使用模块化工具打包自己开发的库文章中有提到，当时需要写一个，监控小程序的后台接口调用和页面报错，今天就来说下实现原理吧原理之前也做过浏览器端的数据埋点上报，其实原理大同小异通过劫持原始方法，获取需要上报的数据，最后再执行原始方法，这博客地址《使用模块化工具打包自己开发的JS库》文章中有提到，当时需要写一个SDK，监控小程序的后台接口调用和页面报错，今天就来说下实现原理吧！ ...

Cheriselalala 2019-08-22 18:04 评论0 收藏0