背景
- 由于最近公司要求開發(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í)原理很簡單,就是在微信小程序注冊(cè)頁面接受一個(gè)初始化對(duì)象前攔截做些處理,我這里判斷無權(quán)限時(shí),更改原pageObj的 onShow生命周期函數(shù),改為重定向去登陸頁,操作完再return 出微信小程序注冊(cè)頁面所需的Page({pageObj})就行,原理很簡單,思路證實(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ā)一次,也就是說,只能攔截一次(很尷尬) - 所以這篇文章即是分享一種方法,也是尋求一種解決方案
