微信小程序开发页面拦截器的示例

　　介绍

这篇文章主要介绍微信小程序开发页面拦截器的示例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

<>强场景

<李>

小程序有52个页面,其中13个页面无需任何身份,另外39个页面需要系统角色。对于这39个页面,如果微信用户没有系统角色,则跳转到登录页。

<李>

是否有系统角色信息需要通过异步请求来获取。

<强>需求分析,实现

对需求进行抽象,其实要的就是一个过滤器,对小程序页面的访问进行过滤,符合条件的通过,不符合条件进行其他处理。

使用过php的laravel框架的童鞋,肯定一下子就联想到了laravel框架的http中间件:

http中间件提供一个方便的机制来过滤进入应用程序的http请求,例如,laravel默认包含了一个中间件来检验用户身份验证,如果用户没有经过身份验证,中间件会将用户导向登录页面,然而,如果用户通过身份验证,中间件将会允许这个请求进一步继续前进。当然,除了身份验证之外,中间件也可以被用来执行各式各样的任务,歌珥中间件负责替所有即将离开程序的响应加入适当的响应头,一个日志中间件可以记录所有传入应用程序的请求。

令人忧桑的是,微信小程序并没有提供针对页面实例的中间件机制,所以只能从页面实例的生命周期处下手。

微信小程序开发页面拦截器的示例

对于onLoad,一个页面只会调用一次,对于昂秀,每次打开页面(比如小程序从后台转到前台)都会调用一次。

在onLoad或者昂秀钩子函数里,对用户身份进行校验,通过后则拉取该页面需要的数据,否则跳转到登录页。

//orderDetail.js 　　昂秀:function  (), { 　　let 才能;that =,;//才能身份校验 　　service.identityCheck才能((),=祝辞,{ 　　,,,,//跳转到登录页 　　,,,,wx.redirectTo ({ 　　,,,,,url:,“/页/共同/登录/login" 　　,,,,}); 　　,,,},,(),=祝辞,{,, 　　,,,,//获取页面数据等等,,, 　　,,,,that.getDetail (this.orderId); 　　,,,,… 　　,,,} 　　,,); 　　},

不过,每个页面都要这样写,重复代码好多啊,侵入性也不强。如用装饰函数(高大上的说法是装饰者模式)来包装一下:

//filter.js 　　function  identityFilter (pageObj) { 　　如果才能(pageObj.onShow) { 　　,,,let  _onShow =, pageObj.onShow; 　　,,,pageObj.onShow =,函数(){ 　　,,,,,service.identityCheck(()=祝辞{ 　　,,,,,,,//跳转到登录页 　　,,,,,,,wx.redirectTo ({ 　　,,,,,,,,,url:,“/页/共同/登录/login" 　　,,,,,,,}); 　　,,,,,},()=祝辞{ 　　,,,,,,,//获取页面实例,防止这劫持 　　,,,,,,,let  currentInstance =, getPageInstance (); 　　,,,,,,,_onShow.call (currentInstance); 　　,,,,,}); 　　,,,} 　　,,} 　　return 才能;pageObj; 　　} 　　 　　function  getPageInstance () { 　　var 才能;pages =, getCurrentPages (); 　　return 才能;页面(pages.length 作用;1); 　　} 　　 　　时间=exports.identityFilter  identityFilter;

<代码> filter.js> 过滤器。identityFilter> //orderDetail.js 　　let  filter =,要求(& # 39;filter.js& # 39;); 　　页面(filter.identityFilter ({ 　　,,… 　　,,昂秀:function  (), { 　　,,,//获取页面数据等等 　　,,,this.getDetail (this.orderId); 　　,,,//? 　　,,}, 　　,,… 　　}));

<强>使用承诺进行优化

上面的实现中,每次访问页面,都会执行一次获取用户身份的方法(就是上面代码里的服务。identityCheck)。其实没有必要的,在小程序启动的时候获取一次就行了。也就是说,放在应用。js的onLaunch方法里执行。

每个小程序页面实例化时,一般也会执行异步方法,用来获取页面需要的数据。关键在于,我们需要保证,页面的异步方法必须在获取用户身份的异步请求之后执行。

毋容置疑,承诺最擅长处理异步请求的执行顺序了。主子,快放代码粗来:

//app.js 　　应用程序({ 　　onLaunch才能:函数(){ 　　,,,let  p =, new 承诺(函数(解决,拒绝){ 　　,,,,,service.identityCheck(解决,拒绝); 　　,,,}); 　　,,,this.globalData.promise =,,, 　　,,}, 　　,,… 　　,,globalData: { 　　,,,承诺:空, 　　,,}, 　　});

微信小程序开发页面拦截器的示例