微信小程序之页面拦截器

场景

小程序有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

时间: 09-05

微信小程序之页面拦截器的相关文章

微信小程序授权页面

微信小程序授权页面,效果图如下 app.js  中的 onLaunch或onShow中加如下代码,如果没授权跳转到授权页面 // 获取用户信息 wx.getSetting({ success: res => { if (res.authSetting['scope.userInfo']) { // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框 wx.getUserInfo({ success: res => { // 可以将 res 发送给后台解码出 unionId

微信小程序开发之视频播放器 弹幕 弹幕颜色自定义

把录音的模块尝试过之后就想着微信小程序的视频播放会不会更有趣? 果然,微信小程序视频自带弹幕.是不是很爽,跟我一起来看看. 微信小程序开发之录音机 音频播放 动画 (真机可用) 先上gif: 再上几张图: 1.视频播放器 2.选择弹幕颜色 3.弹幕来了... 1.视频播放器 微信已经封装的非常好.我这里只用了很简单的几个属性 由于以前没做过弹幕,看到danmu-list就激动了.而且只需要将弹幕内容加入集合即可. 弹幕列表的元素: { text: '第 1s 出现的红色弹幕',//文本 colo

微信小程序之页面跳转

如今 微信小程序已经充满的我们的生活,那么今天我就来说一说微信小程序中的最基础的 页面跳转 1. wx.navigateTo(保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面.) 简单点说,有两个页面 分别为页面A,页面B ,你想要从页面A 跳转到页面B 就可以在页面A使用这个方法 wx.navigateTo({ url: '../pages/B' }) 当然这是不穿参数的 只是单纯的跳转页面若想要传参的话 可以用"?+id=123&&na

微信小程序之页面打开数量限制

无论是在小程序还是APP中,打开一个页面其实就是创建了一个新的View对象,一层层叠加的.当点击页面的回退按钮就是把当前页面关闭. 这个过程中会涉及到一个问题,就是打开页面的数量.在某些设计下,比如一个商品详情页面中会推荐其他的商品,这些商品点进去就是详情页面.详情页面中又有推荐,又可以点进去.这样重复下去打开的页面就会越来越多. 如果不做限制,当打开数量到一定程度的时候肯定会卡死了.在微信小程序中打开的页面不能超过10个,达到10个页面后,就不能再打开新的页面. 之前出现这个问题,还以为是Bu

asp写的微信小程序支付demo-服务器端是asp+mdb的

这个微信小程序支付demo代码是我用asp写的,微信小程序端加上服务器端用的asp和mdb数据库,下面是代码分享: <view class="container"> <view class='view'>订单说明:{{paydata.title}}</view> <view class='view inputview'> 支付金额:<input bindinput="bindKeyInput" type=&quo

浅谈微信小程序实现页面数据显示

前段时间公司需要一个小程序去实现某项简单的功能,本来作为一个后台人员,只需要完成数据接口和文档部分就可以了: 后来对这小程序好奇再加上文档蛮完整的,然后抽了好几天时间去研究了一下,不多说了.. 1.首先来看简单的目录结构: 2.下面是app.json 需要注意的地方: 3.接着是index页面的数据 4.最后是index页面效果 好了,简单的第一步已经完成了.

微信小程序的页面跳转

小程序页面的跳转: 先创建页面toolbar,并在app.json里面pages写上路径 "pages":[    "pages/index/index",    "pages/logs/logs",    "pages/toolbar/toolbar"  ], 然后写在页面中添加按钮,然后添加事件, <button type="primary" bindtap="start"&g

微信小程序的页面跳转==编程式导航传参 和 标签的方法传参

小程序导航传参接收传递过来的参数 在onload中 实例 原文地址:https://www.cnblogs.com/xiaoxiaoxun/p/11414768.html

【微信】微信小程序 新建页面目录后,怎么自动生成目中的的四个基本文件呢? 新建目录报错如下VM458:2 未找到 app.json 中的定义的 pages &quot;pages/module/module&quot; 对应的 WXML 文件

如下图,在使用微信开发者工具过程中,新创建了页面目录,想要页面文件夹中自动生成四个基本文件 但是新创建了一个页面文件夹,里面的四个基本文件并没有展示出来 然后在app.json添加这个路径,ctrl+s 保存 依旧不能自动生成 解决方法: 经过测试,确实 -->新创建的项目中新创建的第一个空文件夹 才会自动给你创建四个基本文件. 如果已经自己创建过文件目录了,如上面已经创建了pages/swapping目录了,再自己去创建module目录的时候,就不会自动创建,反而会提示你缺少对应的文件!!!