欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-09-08 12:56:43
场景 小程序有52个页面,其中13个页面无需任何身份,另外39个页面需要系统角色。对于这39个页面,如果微信用户没有系统角色,则跳转到登录页。 是否有系...

场景

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

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

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