微信小程序之页面拦截器的示例代码


Posted in Javascript onSeptember 07, 2017

场景

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js实现随机返回数组的一个元素
Aug 13 Javascript
firefox浏览器下javascript 拖动层效果与原理分析代码
Dec 04 Javascript
自己的js工具 Event封装
Aug 21 Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 Javascript
JQuery调用WebServices的方法和4个实例
May 06 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
AngularJS的表单使用详解
Jun 17 Javascript
关于function类中定义变量this的简单说明
May 28 Javascript
详解Vue.js入门环境搭建
Mar 17 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
layui 地区三级联动 form select 渲染的实例
Sep 27 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 #Javascript
微信小程序实现轮播图效果
Sep 07 #Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 #Javascript
JavaScript+CSS相册特效实例代码
Sep 07 #Javascript
AngularJS 打开新的标签页实现代码
Sep 07 #Javascript
基于Cookie常用操作以及属性介绍
Sep 07 #Javascript
基于require.js的使用(实例讲解)
Sep 07 #Javascript
You might like
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
2019/08/20 Javascript
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
Python中的Numpy入门教程
2014/04/26 Python
Apache如何部署django项目
2017/05/21 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
python简易远程控制单线程版
2018/06/20 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
Python3内置模块random随机方法小结
2019/07/13 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
Python爬虫之Selenium多窗口切换的实现
2020/12/04 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
Hawes & Curtis官网:英国经典品牌
2019/07/27 全球购物
大学生实习期自我评价范文
2013/10/03 职场文书
党校学习自我鉴定
2014/02/24 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
2015年酒店工作总结
2015/04/28 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书
关于python类SortedList详解
2021/09/04 Python