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

背景

• 因爲最近公司要求開發小程序,一直很感興趣,也是趁着此次機會,邊文檔邊開發,遇到一些好玩的東西,留此做爲筆記

介紹

• 在開發小程序,構建路由時,由於須要權限判斷,最多見的就是在路由跳轉時判斷用戶是否有權限訪問或使用該功能,而在官網找了好久也沒有看到,諸如 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只觸發一次,也就是說,只能攔截一次(很尷尬)

• 因此這篇文章便是分享一種方法,也是尋求一種解決方案