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


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 相关文章推荐
JavaScript与C# Windows应用程序交互方法
Jun 29 Javascript
jquery实现邮箱自动补全功能示例分享
Feb 17 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
AngularJS基础 ng-switch 指令简单示例
Aug 03 Javascript
Three.js快速入门教程
Sep 09 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
微信小程序 选项卡的简单实例
May 24 Javascript
无限循环轮播图之运动框架(原生JS实现)
Oct 01 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
Vue数据绑定简析小结
May 07 Javascript
js异步接口并发数量控制的方法示例
Nov 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
PHP配置心得包含MYSQL5乱码解决
2006/11/20 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
php去除换行(回车换行)的三种方法
2014/03/26 PHP
php计算两个整数的最大公约数常用算法小结
2015/03/05 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
JavaScript控制Session操作方法
2013/01/17 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
vuejs实现标签选项卡动态更改css样式的方法
2018/05/31 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
layui中的switch开关实现方法
2019/09/03 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
Python中模块string.py详解
2017/03/12 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
使用numpngw和matplotlib生成png动画的示例代码
2021/01/24 Python
私有程序集与共享程序集有什么区别
2013/04/05 面试题
黄河象教学反思
2014/02/10 职场文书
租赁意向书范本
2014/04/01 职场文书
年终考核实施方案
2014/05/26 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
《中彩那天》教学反思
2016/02/24 职场文书
2019同学聚会主持词
2019/05/06 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang
python正则表达式re.search()的基本使用教程
2021/05/21 Python