vue3 导航守卫

Vue3中的导航守卫与Vue2中的类似，用于在路由跳转过程中进行控制和处理。Vue3提供了三种导航守卫：全局前置守卫、路由独享守卫和组件内守卫。

全局前置守卫

全局前置守卫是在路由跳转前进行拦截的守卫，可以用来进行用户身份验证、处理路由参数等操作。在Vue3中，可以通过router.beforeEach方法来定义全局前置守卫：

const router = createRouter({
  history: createWebHistory(),
  routes: [...]
})

router.beforeEach((to, from, next) => {
  // to: 即将跳转的路由对象
  // from: 当前导航正要离开的路由
  // next: 用来确认跳转的函数

  // 用户身份验证
  if (to.meta.requireAuth) {
    const token = localStorage.getItem('token')
    if (token) {
      next()
    } else {
      next('/login')
    }
  } else {
    next()
  }
})

路由独享守卫

路由独享守卫是在单个路由配置中进行拦截的守卫，可以用来进行特定路由的身份验证、处理路由参数等操作。在Vue3中，可以通过beforeEnter配置项来定义路由独享守卫：

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/account',
      component: Account,
      beforeEnter: (to, from, next) => {
        // 路由独享守卫
        const token = localStorage.getItem('token')
        if (token) {
          next()
        } else {
          next('/login')
        }
      }
    }
  ]
})

组件内守卫

组件内守卫是在单个Vue组件中进行拦截的守卫，可以用来进行特定组件的身份验证、处理组件参数等操作。在Vue3中，可以通过beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave三种方法来定义组件内守卫：

const Account = {
  template: `
    <div>
      <h1>My Account</h1>
      <p>{{username}}</p>
    </div>
  `,
  beforeRouteEnter(to, from, next) {
    // 组件内守卫 - beforeRouteEnter
    const token = localStorage.getItem('token')
    if (token) {
      next(vm => {
        // 在路由导航确认前执行，可以访问组件实例
        vm.username = localStorage.getItem('username')
      })
    } else {
      next('/login')
    }
  },
  beforeRouteUpdate(to, from, next) {
    // 组件内守卫 - beforeRouteUpdate
    const token = localStorage.getItem('token')
    if (token) {
      this.username = localStorage.getItem('username')
      next()
    } else {
      next('/login')
    }
  },
  beforeRouteLeave(to, from, next) {
    // 组件内守卫 - beforeRouteLeave
    const answer = confirm('Are you sure you want to leave?')
    if (answer) {
      next()
    } else {
      next(false)
    }
  },
  data() {
    return {
      username: ''
    }
  }
}