博客站

在 UniApp 中，路由守卫（Route Guards）用于在页面跳转前后执行特定的逻辑，例如权限验证、数据加载等。虽然 UniApp 没有直接提供类似 Vue Router 的路由守卫功能，但可以通过以下方式实现类似的效果：

一、使用页面生命周期钩子

UniApp 的页面生命周期钩子（如 onLoad、onShow、onHide 等）可以用于实现路由守卫的功能。

1. 进入页面前的验证

• 在 onLoad 或 onShow 中执行验证逻辑。
• 示例：

  export default {
    onLoad(options) {
      const isAuthenticated = this.checkAuth();
      if (!isAuthenticated) {
        uni.redirectTo({ url: '/pages/login/login' });
      }
    },
    methods: {
      checkAuth() {
        // 检查用户是否已登录
        return uni.getStorageSync('token') !== null;
      }
    }
  };
  

2. 离开页面前的提示

• 在 onHide 或 onUnload 中执行离开页面前的逻辑。
• 示例：

  export default {
    onUnload() {
      uni.showModal({
        title: '提示',
        content: '确定要离开当前页面吗？',
        success: (res) => {
          if (res.confirm) {
            console.log('用户确认离开');
          }
        }
      });
    }
  };
  

二、封装全局路由守卫

通过封装全局方法，可以在页面跳转前后统一处理路由守卫逻辑。

1. 封装 navigateTo 方法

• 在 main.js 中封装一个全局的 navigateTo 方法。
• 示例：

  // main.js
  import Vue from 'vue';
  import App from './App';
  
  Vue.prototype.$navigateTo = function(url, options = {}) {
    const isAuthenticated = uni.getStorageSync('token') !== null;
    if (!isAuthenticated && !options.ignoreAuth) {
      uni.redirectTo({ url: '/pages/login/login' });
    } else {
      uni.navigateTo({ url });
    }
  };
  
  const app = new Vue({
    ...App
  });
  app.$mount();
  

2. 在页面中使用

• 在页面中使用封装的 $navigateTo 方法进行跳转。
• 示例：

  export default {
    methods: {
      goToDetail() {
        this.$navigateTo('/pages/detail/detail');
      }
    }
  };
  

三、使用 Vuex 管理路由状态

对于复杂的路由守卫逻辑，可以结合 Vuex 管理路由状态。

1. 在 Vuex 中定义路由状态

• 示例：

  // store/index.js
  import Vue from 'vue';
  import Vuex from 'vuex';
  Vue.use(Vuex);
  
  const store = new Vuex.Store({
    state: {
      isAuthenticated: false
    },
    mutations: {
      setAuth(state, isAuthenticated) {
        state.isAuthenticated = isAuthenticated;
      }
    }
  });
  
  export default store;
  

2. 在页面中检查路由状态

• 示例：

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

四、总结

UniApp 中可以通过以下方式实现路由守卫：

1. 页面生命周期钩子：在 onLoad、onShow 等钩子中执行验证逻辑。
2. 封装全局方法：封装 navigateTo 方法，统一处理路由守卫。
3. 结合 Vuex：使用 Vuex 管理路由状态，实现复杂的路由守卫逻辑。

以下是一个完整的示例，展示了如何使用页面生命周期钩子实现路由守卫：

export default {
  onLoad() {
    const isAuthenticated = this.checkAuth();
    if (!isAuthenticated) {
      uni.redirectTo({ url: '/pages/login/login' });
    }
  },
  methods: {
    checkAuth() {
      return uni.getStorageSync('token') !== null;
    }
  }
};

通过合理使用这些方法，可以实现 UniApp 中的路由守卫功能，确保页面跳转的安全性和逻辑完整性。