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

在小程序中无法做路由拦截,所以用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];
}
### 微信小程序中实现路由守卫的方法 在微信小程序中,虽然官方并未提供内置的路由拦截功能,但可以通过自定义逻辑来模拟这一特性[^3]。具体来说,在页面加载前判断用户的登录状态或其他条件,如果不符合预期,则阻止进入并重定向至特定页面。 #### 封装全局事件监听器或函数用于检查权限 可以在 `app.js` 中创建一个公共方法来进行身份验证: ```javascript App({ checkLogin() { const userInfo = wx.getStorageSync('userInfo'); if (!userInfo) { // 如果没有存储用户信息表示未登录 return false; } return true; }, }) ``` 此代码片段展示了如何通过本地缓存获取用户信息以确认其是否已登录。 #### 页面初始化时调用该方法 对于每一个需要保护的页面,在对应的 `.js` 文件中的 `onLoad()` 生命周期钩子内加入如下代码: ```javascript Page({ onLoad(options){ const appInstance = getApp(); if(!appInstance.checkLogin()){ wx.redirectTo({ url: '/pages/login/index' }); // 若未登录则转向登录界面 return ; } // 继续执行其他 onload 初始化操作... } }); ``` 上述 JavaScript 代码实现了当页面尝试加载时会先检验是否有合法的身份凭证;如果没有的话就立即终止当前流程并将用户导向到登录界面上去。 另外一种更灵活的做法是利用中间件模式或者更高阶组件(HOC),把这种鉴权行为抽象出来作为单独模块处理,这样可以减少重复代码量同时也便于维护更新。 #### 使用高阶组件方式增强可读性和复用性 假设有一个名为 `authGuard.js` 的文件用来保存这个通用工具类: ```javascript // authGuard.js module.exports = (originalOptions, pageConstructor) => ({ ...originalOptions, onLoad(...args) { const appInstance = getApp(); if (!appInstance.checkLogin()) { wx.redirectTo({url:'/pages/login/index'}); return; } originalOptions.onLoad && originalOptions.onLoad.apply(this, args); } }); ``` 接着修改受保护页面的配置对象为: ```javascript constAuthGuard=require('../../utils/authGuard'); Page(AuthGuard( { data:{}, onLoad:function(){ console.log("This will only run after login validation"); } })) ``` 这种方法不仅保持了原有业务逻辑不变,还使得整个应用的安全策略更加集中统一管理。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值