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


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代码实现selece二级联动(推荐)
Feb 18 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
javascript的push使用指南
Dec 05 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
jQuery实现背景滑动菜单
Dec 02 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
简单实现js倒计时功能
Feb 13 Javascript
Express系列之multer上传的使用
Oct 27 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
LayUI表格批量删除方法
Aug 15 Javascript
vue 单页应用和多页应用的优劣
Oct 22 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
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
PHP 代码规范小结
2012/03/08 PHP
PHP基础陷阱题(变量赋值)
2012/09/12 PHP
php while循环得到循环次数
2013/10/26 PHP
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
javascript OFFICE控件测试代码
2009/12/08 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
2010/11/11 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
微信小程序 实战程序简易新闻的制作
2017/01/09 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
华为C++笔试题
2014/08/05 面试题
销售人员自我评价怎么写
2013/09/19 职场文书
大学应届生求职简历的自我评价
2013/10/08 职场文书
机械绘图员岗位职责
2013/11/19 职场文书
高分子材料与工程专业推荐信
2013/12/01 职场文书
体育课课后反思
2014/04/24 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
三人合伙协议书范本
2014/10/29 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android