uniapp vue3如何做路由守卫？

Question

uniapp vue3如何做路由守卫？有合适的插件吗？

Answer 1

uni-crazy-router或者uni-simple-router
常规：

// 注册页面跳转拦截器
uni.addInterceptor('navigateTo', {
  invoke(e) {

    console.log('跳转前拦截', e)
    const token = uni.getStorageSync('token')
    if (!token && e.url !== '/pages/login/login') {
      uni.navigateTo({
        url: '/pages/login/login'
      })
      return false
    }
    return true
  },
  success(e) {
    // 跳转成功回调
    console.log('跳转成功', e)
  },
  fail(e) {
    // 跳转失败回调
    console.log('跳转失败', e)
  }
})

// 同样可以拦截其他导航方法
uni.addInterceptor('redirectTo', { /* 配置同上 */ })
uni.addInterceptor('switchTab', { /* 配置同上 */ })
uni.addInterceptor('reLaunch', { /* 配置同上 */ })