微信小程序实现路由拦截的方法

微信小程序路由拦截实现方法

微信小程序本身没有提供直接的路由拦截功能,但可以通过以下几种方式实现类似的效果:

1. 使用页面跳转前的拦截

方法一:封装路由跳转方法

javascript 复制代码
// utils/router.js
const routeInterceptor = {
  navigateTo: function(params) {
    if (checkAuth()) { // 你的拦截条件
      wx.navigateTo(params)
    } else {
      wx.redirectTo({
        url: '/pages/login/login'
      })
    }
  },
  redirectTo: function(params) {
    // 类似处理
  },
  // 其他路由方法...
}

function checkAuth() {
  // 检查登录状态或其他条件
  return !!getApp().globalData.token
}

module.exports = routeInterceptor

然后在项目中统一使用这个封装的方法:

javascript 复制代码
const router = require('utils/router.js')
router.navigateTo({
  url: '/pages/user/user'
})

方法二:使用全局变量和行为拦截

javascript 复制代码
// app.js
App({
  onLaunch() {
    // 重写页面跳转方法
    this.overridePageMethods()
  },
  
  overridePageMethods() {
    const originalNavigateTo = wx.navigateTo
    wx.navigateTo = (params) => {
      if (this.checkAuth(params.url)) {
        originalNavigateTo(params)
      } else {
        wx.redirectTo({
          url: '/pages/login/login'
        })
      }
    }
    // 类似处理其他方法...
  },
  
  checkAuth(url) {
    // 检查白名单或权限
    const whiteList = ['/pages/index/index', '/pages/login/login']
    if (whiteList.includes(url)) return true
    return !!this.globalData.token
  }
})

2. 使用页面生命周期拦截

在每个需要拦截的页面的onLoadonShow中进行检查:

javascript 复制代码
// pages/user/user.js
Page({
  onLoad(options) {
    if (!getApp().globalData.token) {
      wx.redirectTo({
        url: '/pages/login/login'
      })
      return
    }
    // 正常逻辑...
  }
})

3. 使用自定义导航组件

创建一个自定义导航组件,内部封装权限检查逻辑。

注意事项

  1. 小程序的路由跳转有数量限制(最多10层页面栈)
  2. 拦截逻辑要考虑用户体验,避免死循环
  3. 对于tabBar页面,需要使用wx.switchTab,无法直接拦截
  4. 在app.json中配置的页面路径无法被拦截

最佳实践建议

  1. 对于简单的权限检查,推荐使用方法一(封装路由方法)
  2. 对于复杂项目,推荐组合使用全局拦截和页面生命周期检查
  3. 将权限检查逻辑集中管理,便于维护

以上方法可以根据你的具体需求进行组合和调整。

相关推荐
JosieBook13 小时前
【SpringBoot】21-Spring Boot中Web页面抽取公共页面的完整实践
前端·spring boot·python
吃饭睡觉打豆豆嘛14 小时前
深入剖析 Promise 实现:从原理到手写完整实现
前端·javascript
前端端14 小时前
claude code 原理分析
前端
GalaxyMeteor14 小时前
Elpis 开发框架搭建第二期 - Webpack5 实现工程化建设
前端
Spider_Man14 小时前
从 “不会迭代” 到 “面试加分”:JS 迭代器现场教学
前端·javascript·面试
我的写法有点潮14 小时前
最全Scss语法,赶紧收藏起来吧
前端·css
小高00714 小时前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js
Mo_jon14 小时前
css 遮盖滚动条,鼠标移上显示
前端·css
EveryPossible14 小时前
终止异步操作
前端·javascript·vue.js
Stringzhua15 小时前
setup函数相关【3】
前端·javascript·vue.js