vue3 导航守卫

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()
  }
})

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')
        }
      }
    }
  ]
})

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: ''
    }
  }
}