uniapp路由拦截如何实现

在uniapp中如何实现路由拦截？我想在用户跳转页面时进行权限判断，比如未登录状态下禁止访问某些页面。请问具体应该在哪里配置拦截逻辑？是需要修改路由配置文件还是通过全局钩子实现？最好能提供详细的代码示例说明。

2 回复

在main.js中配置路由拦截，使用uni.addInterceptor拦截路由跳转。例如：

uni.addInterceptor('navigateTo', {
  invoke(args) {
    // 检查登录状态
    if (!isLogin) {
      uni.redirectTo({ url: '/pages/login/login' })
      return false // 阻止原跳转
    }
  }
})

可拦截navigateTo、switchTab等跳转方法，在invoke中处理权限验证。


在 UniApp 中，可以通过全局前置守卫 uni.addInterceptor 实现路由拦截，用于在页面跳转前进行权限验证、登录检查等操作。以下是具体实现方法：

实现步骤

  1. 在 App.vue 的 onLaunch 生命周期中添加拦截器。
  2. 使用 uni.addInterceptor 拦截 navigateTo、redirectTo 等路由方法。
  3. 在拦截器中编写逻辑（如检查登录状态），决定是否允许跳转或重定向到其他页面。

示例代码

在 App.vue 中：

export default {
  onLaunch() {
    // 添加路由拦截器
    uni.addInterceptor('navigateTo', {
      invoke(args) {
        // 在这里进行拦截逻辑，例如检查用户是否登录
        const isLogin = checkLoginStatus(); // 自定义登录检查函数
        if (!isLogin && args.url !== '/pages/login/login') {
          // 未登录且目标页面不是登录页，则跳转到登录页
          uni.redirectTo({
            url: '/pages/login/login'
          });
          return false; // 阻止原跳转
        }
        return true; // 允许跳转
      },
      fail(err) {
        console.log('跳转失败:', err);
      }
    });

    // 可选：拦截其他路由方法（如 redirectTo、switchTab）
    uni.addInterceptor('redirectTo', {
      invoke(args) {
        // 类似逻辑...
        return true;
      }
    });
  }
};

说明

  • 拦截方法：支持 navigateTo、redirectTo、switchTab、reLaunch、navigateBack。
  • 逻辑处理：在 invoke 中返回 false 可取消跳转，返回 true 则继续。
  • 应用场景：适用于登录验证、页面权限控制、跳转前数据检查等。

注意事项

  • 拦截器需在应用启动时注册（如 onLaunch）。
  • 避免在拦截器中无限循环跳转（例如，未登录时重定向到登录页，但登录页也被拦截）。

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

回到顶部