微信小程序开发页面拦截器详解(如何拦截微信小程序)

本文主要介绍微信小程序的页面拦截器的样例代码。我觉得小编挺好的。现在分享给大家，给大家一个参考。用小编来看看吧

事件

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

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

需求分析与实现

把需求抽象出来，其实我们需要的是一个过滤器，对小程序页面的访问进行过滤，通过需求，如果不满足则做其他处理。

用过php的laravel框架的童鞋，一定要马上关联laravel框架的http中间件:

HTTP中间件提供了一种方便的机制来过滤进入应用程序的HTTP请求。例如，Laravel默认包含一个中间件来验证用户身份。如果用户未通过身份验证，中间件会将用户定向到登录页面。但是，如果用户通过了身份验证，中间件将允许请求继续进行。当然，除了认证，中间件还可以用来执行各种任务。CORS中间件负责为所有即将离开程序的响应添加适当的响应头，日志中间件可以记录所有传入的应用程序请求。

令人担忧的是，微信小程序并没有提供页面实例的中间件机制。所以只能从页面实例的生命周期入手。

对于onLoad，一个页面只会被调用一次；对于onShow，每次打开页面都会调用一次(比如小程序从后台移到前台)。

在onLoad或onShow hook函数中，检查用户身份，通过后再拉取页面所需数据，否则跳转到登录页面。

//order detail . JSON show:function(){ let that = this；//authentic ation service . identity check(()= >；{//跳转到登录页面wx . redirect to({ URL:"/pages/common/log in/log in & quot；});}，()= & gt{//获取页面数据等等that . Get detail(this . orderid)；...} );}，但是，每一页都应该这样写。有很多重复的代码，也很碍事。最好用一个装饰函数包装一下(高大上的说法就是装饰器模式):

//filter . jsfunction identity filter(page obj){ if(page obj . on show){ let _ on show = page obj . on show；page obj . on show = function(){ service . identity check(()= & gt；{//跳转到登录页面wx . redirect to({ URL:"/pages/common/log in/log in & quot；});}，()= & gt{//获取页面实例以防止劫持let current instance = getpage instance()；_ on show . call(current instance)；});} } return pageObj}函数getpage instance(){ var pages = getCurrentPages()；返回页面[pages . length -1]；} exports . identity filter = identity filter；Filter.js用于提供过滤方法。除了现有的用户身份拦截，如果后期需要其他拦截，可以在这个文件中添加。然后在需要用户身份拦截的小程序页面代码中，用filter.identityFilter处理即可:

//order detail . jslet filter = require(& # 039；filter.js & # 039);Page (filter.identityfilter ({...on show:function(){//获取页面数据等等this . Get detail(this . orderid))；//...}, ...}));用承诺优化。

在上面的实现中，每次访问一个页面，都会执行一个获取用户身份的方法(即服务。上面代码中的identityCheck)。其实没必要。小程序启动时获取一次即可。也就是说，它在app.js的onLaunch方法中执行..

当实例化每个applet页面时，通常会执行异步方法来获取页面所需的数据。关键的一点是，我们需要保证页面的异步方法必须在异步请求获得用户身份之后执行。

毫无疑问，Promise最擅长处理异步请求的执行顺序。主人，输入粗略代码:

//app . jsapp({ on launch:function(){ let p = new Promise(function(resolve，reject){ service . identity check(resolve，reject)；});this . global data . promise = p；}, ...globalData: { promise:null，} })；//filter.jsconst appData = getApp()。globalData函数identity filter(page obj){ if(page obj . on show){ let _ on show = page obj . on show；PageObj.onShow = function(){ //改点appdata . promise . then(()= >；{//跳转到登录页面wx . redirect to({ URL:"/pages/common/log in/log in & quot；});}，()= & gt{//获取页面实例以防止劫持let current instance = getpage instance()；_ on show . call(current instance)；});} } return pageObj}摘要

小程序页面的用户身份拦截器基本实现了，但还是不如laravel的http中间件:

你需要为每个页面包装一层代码。

即使用户认证失败，小程序也不会阻止页面的渲染。如果一分钟内执行了获取用户身份的异步方法，小程序页面还是会显示，然后一分钟后会跳转到登录页面。你需要加入你自己的逻辑。比如这一分钟，页面显示空白内容。

VIP推荐:22门课程，总价3725元。VIP会员免费。