昨天寫了個(gè)小程序案例抽诉，發(fā)現(xiàn)小程序沒(méi)有提供路由攔截的功能陨簇，查了半天資料，終于是搞定了迹淌，這里記錄一下下
PS: 如果對(duì)node.js比較熟悉的話河绽，應(yīng)該對(duì)express/koa框架中的經(jīng)常提到的中間件概念比較熟悉，這里就使用中間件的機(jī)制來(lái)處理巍沙。結(jié)合小程序中Page()函數(shù)和生命周期
需求描述
小程序需開(kāi)發(fā)過(guò)程中葵姥，有些頁(yè)面我們希望用戶登錄授權(quán)后才可以使用，然而我們不能再每個(gè)頁(yè)面添加登錄驗(yàn)證代碼句携，這樣似乎太麻煩了榔幸，希望能制作一個(gè)通用的小程序路由攔截器
實(shí)現(xiàn)過(guò)程
微信授權(quán)代碼
wx.getUserProfile({
desc: '用于完善會(huì)員資料', // 聲明獲取用戶個(gè)人信息后的用途，后續(xù)會(huì)展示在彈窗中，請(qǐng)謹(jǐn)慎填寫
success: (res) => {
this.setData({
userInfo: res.userInfo
})
}
})
用戶資料的保存削咆、清除
wx.getUserProfile({
desc: '用于完善會(huì)員資料', // 聲明獲取用戶個(gè)人信息后的用途牍疏，后續(xù)會(huì)展示在彈窗中，請(qǐng)謹(jǐn)慎填寫
success: (res) => {
this.setData({
userInfo: res.userInfo
})
wx.setStorageSync('userInfo', res.userInfo)
},
fail() {
this.setData({
userInfo: {}
})
wx.removeStorageSync('userInfo')
}
})
全局路由攔截器
- 攔截page頁(yè)面的
onShow方法拨齐，判斷是否有權(quán)限
/**
* routerFillter --全局路由攔截器
* @function
* @param{Object} pageObj 當(dāng)前頁(yè)面的page對(duì)象
* @param{Boolean} flag 是否開(kāi)啟權(quán)限判斷
*/
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) // 記錄當(dāng)前路由鳞陨，用于登錄完跳轉(zhuǎn)回當(dāng)前頁(yè)面
wx.redirectTo({
url: '/pages/auth/auth',
})
}
}
}
return Page(pageObj)
}
授權(quán)代碼修改
- 成功后返回之前頁(yè)面
//檢測(cè)授權(quán)登錄
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'), // 使用路由跳轉(zhuǎn)
fail: () => {
wx.switchTab({
url: '/' + wx.getStorageSync('prevRouter') // tab跳轉(zhuǎn)
})
}
})
},
fail() {
wx.removeStorageSync('userInfo')
wx.navigateBack({
delta: 1
})
}
})
}
使用攔截器
- routerFillter 替換 Page
import {
routerFillter
} from '../../utils/filter.js';
routerFillter({
// 內(nèi)部和原來(lái)的Page一樣
})
總結(jié)
- 上面貼代碼有點(diǎn)亂了，這里再寫一下過(guò)程??
- 編寫授權(quán)頁(yè)面瞻惋，授權(quán)按鈕綁定事件
- 在事件中 編寫微信授權(quán)代碼
- 在工具函數(shù)中創(chuàng)建 全局路由攔截器厦滤，編寫函數(shù)
- 修改微信授權(quán)代碼，處理路由跳轉(zhuǎn)
- 在需要的頁(yè)面中使用
