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

网络编程 2025/1/12 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

场景

小程序有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中间件还是逊色一些：

需要对每个页面代码包装一层。
即使用户身份校验不通过，小程序也并不会阻塞页面的渲染。假如获取用户身份的异步方法一分钟才执行完，小程序页面还是会展示出来，一分钟之后才跳转到登录页。需要自己增加逻辑，比如在这一分钟内，页面展示空白内容。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

微信小程序页面拦截器,微信小程序拦截器

标签：

微信小程序页面拦截器,微信小程序拦截器

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

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

暂无微信小程序之页面拦截器的示例代码的评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2025年01月12日

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

微信小程序页面拦截器,微信小程序拦截器

React + webpack 环境配置的方法步骤

nodejs创建简易web服务器与文件读写的实例

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接