uniapp vue3 路由拦截跳转如何实现

在uniapp中使用vue3开发时，如何在路由跳转前进行拦截处理？比如需要检查用户登录状态，未登录时自动跳转到登录页。具体应该在哪里配置路由守卫？能否提供一个完整的示例代码，包括全局前置守卫和特定页面的拦截逻辑？

2 回复

在uniapp的vue3中，使用uni.addInterceptor实现路由拦截：

uni.addInterceptor('navigateTo', {
  invoke(args) {
    // 拦截逻辑
    if (!hasPermission()) {
      return false // 阻止跳转
    }
  }
})

可拦截navigateTo、redirectTo等跳转方法。


在 UniApp 中使用 Vue 3 实现路由拦截（跳转拦截）可以通过以下步骤完成，主要依赖 uni.addInterceptor API 来拦截页面跳转行为。以下是具体实现方法：

实现步骤

  1. 在 main.js 或应用入口文件中添加拦截器：
    使用 uni.addInterceptor 拦截路由跳转（如 navigateTo、redirectTo 等），并在拦截逻辑中处理权限验证或其他条件。

  2. 定义拦截逻辑：
    在拦截器中检查用户状态（例如登录状态），决定是否允许跳转。如果未通过验证，可以重定向到登录页或其他页面。

示例代码

// main.js 或 App.vue
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 添加路由拦截器
uni.addInterceptor('navigateTo', {
  invoke(args) {
    // 在这里添加拦截逻辑，例如检查登录状态
    const isLoggedIn = checkLoginStatus() // 假设的检查函数
    if (!isLoggedIn && args.url !== '/pages/login/login') {
      // 未登录且目标页面不是登录页，跳转到登录页
      uni.redirectTo({
        url: '/pages/login/login'
      })
      return false // 阻止原始跳转
    }
    return true // 允许跳转
  },
  fail(err) {
    console.error('跳转失败:', err)
  }
})

// 其他跳转方法也可类似拦截（如 redirectTo、switchTab）
uni.addInterceptor('redirectTo', {
  invoke(args) {
    // 类似逻辑，根据需要调整
    return true
  }
})

app.mount('#app')

说明

  • 拦截方法：uni.addInterceptor 支持拦截 navigateTo、redirectTo、switchTab、reLaunch 等跳转方法。
  • 逻辑自定义：在 invoke 钩子中编写验证逻辑（如检查 token、用户角色等）。
  • 阻止跳转：返回 false 可取消原始跳转，并用 uni.redirectTo 等实现重定向。
  • 注意事项：确保拦截器不会导致循环跳转（例如登录页也被拦截）。

扩展建议

  • 将登录状态检查封装为函数（如 checkLoginStatus），方便复用。
  • 对于需要权限的页面，可以在页面路由配置中附加元信息（meta），在拦截器中动态验证。

通过以上方法，即可在 UniApp Vue 3 中实现灵活的路由拦截功能。

回到顶部