昨天寫了個小程序案例，發(fā)現(xiàn)小程序沒有提供路由攔截的功能，查了半天資料，終于是搞定了，這里記錄一下下
PS: 如果對node.js比較熟悉的話，應該對express/koa框架中的經(jīng)常提到的中間件概念比較熟悉，這里就使用中間件的機制來處理。結合小程序中Page()函數(shù)和生命周期

需求描述

小程序需開發(fā)過程中，有些頁面我們希望用戶登錄授權后才可以使用，然而我們不能再每個頁面添加登錄驗證代碼，這樣似乎太麻煩了，希望能制作一個通用的小程序路由攔截器

實現(xiàn)過程

微信授權代碼

wx.getUserProfile({
  desc: '用于完善會員資料', // 聲明獲取用戶個人信息后的用途，后續(xù)會展示在彈窗中，請謹慎填寫
  success: (res) => {
    this.setData({
    userInfo: res.userInfo
    })
  }
})

用戶資料的保存、清除

wx.getUserProfile({
  desc: '用于完善會員資料', // 聲明獲取用戶個人信息后的用途，后續(xù)會展示在彈窗中，請謹慎填寫
  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一樣
})

總結

• 上面貼代碼有點亂了，這里再寫一下過程??
  • 編寫授權頁面，授權按鈕綁定事件
  • 在事件中 編寫微信授權代碼
  • 在工具函數(shù)中創(chuàng)建 全局路由攔截器，編寫函數(shù)
  • 修改微信授權代碼，處理路由跳轉
  • 在需要的頁面中使用