uniapp中路由拦截方法-阿里云开发者社区

uniapp中路由拦截方法

2024-05-16 347

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： uniapp中路由拦截方法

深入解析uni-app中的路由拦截方法

在现代移动应用开发中，uni-app因其跨平台能力、高效的编译速度以及基于Vue.js的熟悉性而受到广泛欢迎。随着应用复杂度的增加，路由管理成为了不可或缺的一部分，而路由拦截更是其中的关键环节。本文将详细探讨在uni-app中实现路由拦截的各种方法，并分析其使用场景。

路由拦截的重要性

路由拦截在应用中扮演着守门人的角色，它能够在用户导航至新的页面之前进行必要的检查、修改状态或是获取数据。常见的使用场景包括：

权限验证：确保用户有权访问特定页面。
数据预加载：在进入页面之前预先加载必要的数据。
状态管理：根据应用状态决定是否允许导航，或如何导航。
页面跳转优化：例如，实现页面的按需加载。

uni-app中的路由系统

在uni-app中，路由管理是通过框架提供的API来实现的，如uni.navigateTo、uni.redirectTo等。然而，与传统的Web路由系统不同，uni-app的路由系统是基于原生导航的，因此在实现路由拦截时需要采用特定的方法。

实现路由拦截的方法

1. 使用页面生命周期钩子

uni-app中的每个页面都有其生命周期钩子，如onLoad、onShow等。通过在这些钩子中添加逻辑，可以实现简单的路由拦截。

例如，在onLoad钩子中，可以检查用户的登录状态，如果用户未登录，则重定向到登录页面。

export default {
  onLoad() {
    if (!this.$store.state.isLoggedIn) {
      uni.redirectTo({
        url: '/pages/login/login'
      });
    }
  }
}

2. 使用全局混入（Mixin）

如果需要在多个页面中实现相同的拦截逻辑，可以使用Vue的混入功能。创建一个全局混入，并在其中定义生命周期钩子，这样可以在所有页面中应用相同的拦截逻辑。

Vue.mixin({
  onLoad() {
    // 路由拦截逻辑
  }
});

3. 使用自定义导航守卫

虽然uni-app没有像Vue Router那样的导航守卫API，但可以通过封装导航方法来实现类似的功能。

例如，可以创建一个名为navigateTo的封装方法，在该方法中添加拦截逻辑，并在应用中使用此方法替代uni.navigateTo。

// 封装导航方法
function navigateTo(url, success, fail) {
  // 拦截逻辑
  if (/* 拦截条件 */) {
    // 处理拦截
  } else {
    uni.navigateTo({
      url,
      success,
      fail
    });
  }
}

// 在应用中使用封装的方法
navigateTo('/pages/target/target');

4. 使用条件编译和运行时判断

在某些场景下，可能需要根据编译条件或运行时环境来决定是否进行路由拦截。uni-app支持条件编译，可以在代码中添加特定平台的逻辑。

export default {
  onLoad() {
    // #ifdef MP-WEIXIN
    // 微信小程序特定逻辑
    // #endif

    // #ifdef H5
    // H5特定逻辑
    // #endif
  }
}

5. 结合Vuex进行状态管理

对于复杂的路由拦截需求，可以结合Vuex进行状态管理。通过在Vuex中定义状态和操作，可以在路由拦截时更方便地访问和修改应用状态。

// 在Vuex store中定义状态
state: {
  isLoggedIn: false
},

// 在页面中使用状态
computed: {
  isLoggedIn() {
    return this.$store.state.isLoggedIn;
  }
},

onLoad() {
  if (!this.isLoggedIn) {
    // 处理拦截
  }
}

路由拦截的最佳实践

保持拦截逻辑的清晰和简洁：避免在拦截逻辑中添加过多的业务代码，以保持其可读性和可维护性。
合理使用异步操作：在拦截逻辑中可能需要执行异步操作（如API调用），要确保正确处理异步操作的结果和错误。
提供友好的用户反馈：在拦截用户导航时，提供明确的反馈，以指导用户进行下一步操作。
考虑性能影响：拦截逻辑可能会对应用性能产生影响，特别是在需要执行复杂操作或多次拦截时。

uni.addInterceptor(STRING, OBJECT) 添加拦截器

STRING 参数说明

需要拦截的api名称，如：uni.addInterceptor('request', OBJECT) ，将拦截 uni.request()

OBJECT 参数说明

参数名	类型	必填	默认值	说明	平台差异说明

invoke	Function	否	拦截前触发
success	Function	否	成功回调拦截
fail	Function	否	失败回调拦截
complete	Function	否	完成回调拦截

页面跳转的拦截（路由拦截）也就变成拦截 ["navigateTo", "redirectTo", "reLaunch", "switchTab"]这4个方法： 1. 首先创建一个config.js配置一下白名单啥的

export default {
  //不需要登录的页面,白名单
  whiteList: [
    "/pages/index/index",
    //......
  ],
  //登录页
  loginPage:"/pages/login/index"
}

2.创建一个init.js

import config from "./config.js"
export default function initApp() {
  /**
   * 页面跳转拦截器
   */
  let list = ["navigateTo", "redirectTo", "reLaunch", "switchTab"];
  list.forEach(item => { //用遍历的方式分别为,uni.navigateTo,uni.redirectTo,uni.reLaunch,uni.switchTab这4个路由方法添加拦截器
    uni.addInterceptor(item, {
      invoke(e) { // 调用前拦截
        //获取用户的token
        const token = uni.getStorageSync('uni_id_token'),
          //token是否已失效
          tokenExpired = uni.getStorageSync('uni_id_token_expired') < Date.now(),
          //获取要跳转的页面路径（url去掉"?"和"?"后的参数）
          url = e.url.split('?')[0];
        let notNeed = config.whiteList.includes(url)
        // 如果在whiteList里面就不需要登录
        if (notNeed) {
          return e
        } else {
          //需要登录
          if (token == '' || tokenExpired) {
            uni.showToast({
              title: '请先登录',
              icon: 'none'
            })
            uni.navigateTo({
              url: config.loginPage
            })
            return false
          }else{
            return e
          }
        }
        
      },
      fail(err) { // 失败回调拦截 
        console.log(err);
        if (Debug) {
          console.log(err);
          uni.showModal({
            content: JSON.stringify(err),
            showCancel: false
          });
        }
      }
    })
  })
  //添加uniCloud云函数拦截器
  

}