昨天写了个小程序案例，发现小程序没有提供路由拦截的功能，查了半天资料，终于是搞定了，这里记录一下下
PS: 如果对node.js比较熟悉的话，应该对express/koa框架中的经常提到的中间件概念比较熟悉，这里就使用中间件的机制来处理。结合小程序中Page()函数和生命周期
需求描述
小程序需开发过程中，有些页面我们希望用户登录授权后才可以使用，然而我们不能再每个页面添加登录验证代码，这样似乎太麻烦了，希望能制作一个通用的小程序路由拦截器
实现过程
微信授权代码
wx.getUserProfile({
desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success: (res) => {
this.setData({
userInfo: res.userInfo
})
}
})
用户资料的保存、清除
wx.getUserProfile({
desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
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一样
})
总结
- 上面贴代码有点乱了，这里再写一下过程😘
- 编写授权页面，授权按钮绑定事件
- 在事件中 编写微信授权代码
- 在工具函数中创建 全局路由拦截器，编写函数
- 修改微信授权代码，处理路由跳转
- 在需要的页面中使用
