微信小程序类似于路由拦截的中间件

在小程序中无法做路由拦截,所以用page中间页面来代替类似进入页面之后(onShow)判断是否登录,没有的话重定向到登录页的这种需求。

中间页面的主要功能:
1)在每个需要判断是否登录的功能的页面onshow生命周期中来获取storage中的token值,如果有,则跳转到对应页面,没有则跳转到登录页面。
2)跳转到登录页面之前,需要将即将跳转的页面(验证是否登录的页面)的路径及参数存入storage中,以便登录完成后继续跳转到之前想跳转的那个页面。

全局引入中间页:
在这里插入图片描述
每个页面使用:
需要使用中间页的页面,使用app.pageIntercept()包裹,不需要的则不包裹。
在这里插入图片描述

//middleware.js
/* page中间件,在page下的onshow生命周期中判断是否登录时候引入 */
export function pageIntercept(pageObj) {
    if (pageObj.onShow) {
        let _onShow = pageObj.onShow;
        // 使用onLoad的话需要传递options
        pageObj.onShow = function (options) {
            //如果storage中有token,则证明已经登录跳转到对应页面
            if (wx.getStorageSync('token')) {
                wx.removeStorageSync('lastPage')
                let currentInstance = getPageInstance(); // 获取当前页面
                _onShow.call(currentInstance, options);
            } else {
                setLastPage()
                //跳转到登录页
                wx.showModal({
                    title: '提示',
                    content: '您还没有登录',
                    showCancel: false,
                    confirmText: '去登录',
                    success(res) {
                        if (res.confirm) {
                            wx.reLaunch({
                                url: "/pages/login/index"
                            });
                        }
                    }
                })
            }
        }
    }
    return pageObj;
}
//设置登陆前的页面
function setLastPage() {
    let path = '/' + getPageInstance().route
    let options = getPageInstance().options
    let params = ''
    for (let prop in options) {
        params += `${prop}=${options[prop]}&`
    }
    params = params.substring(0, params.length - 1)
    if (params) {
        path = `${path}?${params}`
    }
    wx.setStorageSync('lastPage', path)
}
// 获取当前页面    
function getPageInstance() {
    let pages = getCurrentPages();
    return pages[pages.length - 1];
}
  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值