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


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 相关文章推荐
如何将php数组或者对象传递给javascript
Mar 20 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
Javascript闭包实例详解
Nov 29 Javascript
Node.js 8 中的 util.promisify的详解
Jun 12 Javascript
关于react-router的几种配置方式详解
Jul 24 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
JavaScript实现美化滑块效果
May 17 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
vue路由教程之静态路由
Sep 03 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 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编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
PHP 输出URL的快捷方式示例代码
2013/09/22 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
九种js弹出对话框的方法总结
2013/03/12 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
python reduce 函数使用详解
2017/12/05 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
pytorch SENet实现案例
2020/06/24 Python
Python之Sklearn使用入门教程
2021/02/19 Python
次世代生活态度:Hypebeast
2018/07/05 全球购物
切尔西足球俱乐部官方网上商店:Chelsea FC
2019/06/17 全球购物
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
xml有哪些解析技术?区别是什么
2016/04/26 面试题
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
物业保安员岗位职责制度
2014/01/30 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers