微信小程序之页面拦截器的示例代码
场景
- 小程序有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中间件还是逊色一些：
- 需要对每个页面代码包装一层。
- 即使用户身份校验不通过，小程序也并不会阻塞页面的渲染。假如获取用户身份的异步方法一分钟才执行完，小程序页面还是会展示出来，一分钟之后才跳转到登录页。需要自己增加逻辑，比如在这一分钟内，页面展示空白内容。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本篇文章主要是对js判断ie版本号的简单实现代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
通过js修改标签透明度，兼容IE、FF浏览器，需要的朋友可以参考下2014-01-01
JavaScript错误处理之分析 Uncaught(in promise) error的
在开发过程中,JavaScript的错误处理是一个老生常谈的话题,当应用程序发生未捕获的异常时,Uncaught(in promise) error是其中最常见的错误类型,这篇文章将从多个方面详细阐述这种错误类型的原因与解决方案,感兴趣的朋友一起看看吧2023-12-12
侧栏里的有些内容滚动到页面顶端以后就固定在那个位置，不再跟随滚动条而滚动，想必很多站长朋友都想实现这个效果吧，接下来为大家详细介绍下，感兴趣的你可不要错过了哈2013-03-03
本文主要介绍了js仿淘宝商品放大预览功能的实例。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了JavaScript简单验证表单空值及邮箱格式的方法,涉及javascript基本的表单与字符串操作相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了ES6 迭代器与可迭代对象的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要介绍了JS简单实现表格排序功能,涉及javascript针对页面元素的遍历、判断与排序相关操作技巧,需要的朋友可以参考下2016-12-12
Javascript函数在定义它们的作用域里运行，而不是在执行它们的作用域里运行。2010-11-11
这篇文章主要介绍了如何用CocosCreator实现射击小游戏，此游戏难度不大，仅作为入门的练手小游戏，一小时就能完成，里面用到的知识很常用，喜欢游戏的同学，可以参考下2021-04-04
最新评论