背景

• 由于最近公司要求開發(fā)小程序,一直很感興趣,也是趁著這次機(jī)會(huì),邊文檔邊開發(fā),遇到一些好玩的東西,留此作為筆記

介紹

• 在開發(fā)小程序,構(gòu)建路由時(shí),因?yàn)樾枰獧?quán)限判斷,最常見的就是在路由跳轉(zhuǎn)時(shí)判斷用戶是否有權(quán)限訪問或使用該功能,而在官網(wǎng)找了很久也沒有看到,諸如 vue-router 的 beforeEach 那樣的路由攔截器,但是攔截是肯定需要的,所以自己寫了一個(gè)

代碼

• 直接上代碼

攔截器

const appGlobalData = getApp().globalData;
/**
 * routerFillter --全局路由攔截器
 * @function
 * @param{Object} pageObj 當(dāng)前頁面的page對(duì)象
 * @param{Boolean} flag 是否開啟權(quán)限判斷
 */
exports.routerFillter = function (pageObj, flag = false) {
  if (flag) {
    let _onShow = pageObj.onShow
    pageObj.onShow = function () {
      let that = this
    // 這一步是自己定義獲取登錄狀態(tài)的,只是個(gè)判斷權(quán)限的
      appGlobalData.getSignPrms.then((res) => {
        // 改回this指針
        res.status && _onShow.call(that)
      }, (err) => {
        // 用戶未登錄，重定向個(gè)人頁
        wx.switchTab({
          url: '/pages/manage/manage'
        })
      })
    }
  }
  return Page(pageObj)
}

使用

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

  }
})
// 將Page替換
import { routerFillter } from '/utils/routerFillter.js';
routerFillter({
  // 內(nèi)部一樣
}, true)

其實(shí)原理很簡(jiǎn)單,就是在微信小程序注冊(cè)頁面接受一個(gè)初始化對(duì)象前攔截做些處理,我這里判斷無權(quán)限時(shí),更改原pageObj的 onShow生命周期函數(shù),改為重定向去登陸頁,操作完再return 出微信小程序注冊(cè)頁面所需的Page({pageObj})就行,原理很簡(jiǎn)單,思路證實(shí)可行

存在問題

• 問題是有的,就是因?yàn)槲腋牡氖莖nShow生命周期,而小程序在觸發(fā)onShow時(shí),頁面已經(jīng)展示了,導(dǎo)致頁面可能會(huì)先閃現(xiàn)一次頁面,才會(huì)重定向到登陸頁,

也想過更改onLoad生命周期,但是也是有問題的,因?yàn)橛行╉撁嫒绻O(shè)置了緩存,會(huì)導(dǎo)致onLoad只觸發(fā)一次,也就是說,只能攔截一次(很尷尬)

• 所以這篇文章即是分享一種方法,也是尋求一種解決方案