微信小程序的路由拦截

昨天写了个小程序案例，发现小程序没有提供路由拦截的功能，查了半天资料，终于是搞定了，这里记录一下下
PS: 如果对node.js比较熟悉的话，应该对express/koa框架中的经常提到的中间件概念比较熟悉，这里就使用中间件的机制来处理。结合小程序中Page()函数和生命周期

需求描述

小程序需开发过程中，有些页面我们希望用户登录授权后才可以使用，然而我们不能再每个页面添加登录验证代码，这样似乎太麻烦了，希望能制作一个通用的小程序路由拦截器

实现过程

微信授权代码

wx.getUserProfile({
  desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
  success: (res) => {
    this.setData({
    userInfo: res.userInfo
    })
  }
})

用户资料的保存、清除

wx.getUserProfile({
  desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
  success: (res) => {
    this.setData({
    userInfo: res.userInfo
    })
    wx.setStorageSync('userInfo', res.userInfo)
  },
  fail() {
    this.setData({
      userInfo: {}
    })
    wx.removeStorageSync('userInfo')
  }
})

全局路由拦截器

• 拦截page页面的onShow方法，判断是否有权限

 /**
  * routerFillter --全局路由拦截器
  * @function
  * @param{Object} pageObj 当前页面的page对象
  * @param{Boolean} flag 是否开启权限判断
  */
 exports.routerFilter = function (pageObj, flag = true) {
     if (flag) {
         pageObj.onShow = () => {
             if (!wx.getStorageSync('userInfo')) {
                 let pages = getCurrentPages();
                 let currPage = null;
                 if (pages.length) {
                     currPage = pages[pages.length - 1];
                 }
                 wx.setStorageSync('prevRouter', currPage.route) // 记录当前路由，用于登录完跳转回当前页面
                  wx.redirectTo({
                      url: '/pages/auth/auth',
                  })
             }
         }
     }
     return Page(pageObj)
 }

授权代码修改

• 成功后返回之前页面

//检测授权登录
getUserProfile() {
    wx.getUserProfile({
        desc: '用于完善资料',
        success: (res) => {
            this.setData({
                'userInfo.avatarUrl': res.userInfo.avatarUrl,
                'userInfo.gender': res.userInfo.gender,
                'userInfo.nickName': res.userInfo.nickName
            })
            wx.setStorageSync('userInfo', res.userInfo)
            wx.navigateTo({
                url: wx.getStorageSync('prevRouter'), // 使用路由跳转
                fail: () => {
                    wx.switchTab({
                        url: '/' + wx.getStorageSync('prevRouter') // tab跳转
                    })
                }
            })
        },
        fail() {
            wx.removeStorageSync('userInfo')
            wx.navigateBack({
                delta: 1
            })
        }
    })
}

使用拦截器

• routerFillter 替换 Page

import {
    routerFillter
} from '../../utils/filter.js';
routerFillter({
    // 内部和原来的Page一样
})

总结

• 上面贴代码有点乱了，这里再写一下过程😘
  • 编写授权页面，授权按钮绑定事件
  • 在事件中 编写微信授权代码
  • 在工具函数中创建 全局路由拦截器，编写函数
  • 修改微信授权代码，处理路由跳转
  • 在需要的页面中使用