微信小程序--路由拦截器

背景

• 因为最近公司要求开发小程序,一直很感兴趣,也是趁着此次机会,边文档边开发,遇到一些好玩的东西,留此做为笔记

介绍

• 在开发小程序,构建路由时,由于须要权限判断,最多见的就是在路由跳转时判断用户是否有权限访问或使用该功能,而在官网找了好久也没有看到,诸如 vue-router 的 beforeEach 那样的路由拦截器,可是拦截是确定须要的,因此本身写了一个

代码

• 直接上代码

拦截器

const appGlobalData = getApp().globalData;
/**
 * routerFillter --全局路由拦截器
 * @function
 * @param{Object} pageObj 当前页面的page对象
 * @param{Boolean} flag 是否开启权限判断
 */
exports.routerFillter = function (pageObj, flag = false) {
  if (flag) {
    let _onShow = pageObj.onShow
    pageObj.onShow = function () {
      let that = this
    // 这一步是本身定义获取登陆状态的,只是个判断权限的
      appGlobalData.getSignPrms.then((res) => {
        // 改回this指针
        res.status && _onShow.call(that)
      }, (err) => {
        // 用户未登陆，重定向我的页
        wx.switchTab({
          url: '/pages/manage/manage'
        })
      })
    }
  }
  return Page(pageObj)
}

使用

// 小程序 .js文件
// 官方写法
Page({
  data: {

  }
})
// 将Page替换
import { routerFillter } from '../../utils/routerFillter.js';
routerFillter({
  // 内部同样
}, true)

其实原理很简单,就是在微信小程序注册页面接受一个初始化对象前拦截作些处理,我这里判断无权限时,更改原pageObj的 onShow生命周期函数,改成重定向去登录页,操做完再return 出微信小程序注册页面所需的Page({pageObj})就行,原理很简单,思路证明可行

存在问题

• 问题是有的,就是由于我更改的是onShow生命周期,而小程序在触发onShow时,页面已经展现了,致使页面可能会先闪现一次页面,才会重定向到登录页,

也想过更改onLoad生命周期,可是也是有问题的,由于有些页面若是设置了缓存,会致使onLoad只触发一次,也就是说,只能拦截一次(很尴尬)

• 因此这篇文章便是分享一种方法,也是寻求一种解决方案