路由守卫：你是谁？你去哪？有通行证吗？

前端的保安：Vue Router

做单页应用（SPA），路由管理是绕不开的一环。而“路由守卫”（Navigation Guards）则是其中最精彩（也最容易出 Bug）的部分。

全局前置守卫：beforeEach

这就好比小区门口的保安大爷，不管你是谁，进门先查证。

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) {
    next({ name: 'Login' })
  } else {
    next()
  }
})

看起来逻辑天衣无缝？只要没登录，就踢回登录页。但是！如果你的逻辑写得稍微有一点漏洞，就会陷入无限循环。

比如，你忘记判断 to.name !== 'Login'，那么用户被重定向到 Login 页，再次触发 beforeEach，再次重定向… 浏览器直接卡死，你也懵逼了。

组件内的守卫

beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。这些钩子函数让我们可以精确控制组件级的路由行为。

• beforeRouteEnter：在渲染该组件的对应路由被 confirm 前调用。注意！此时组件实例还没被创建，所以你不能用 this！这又是 Vue 新手的一大坑。
• beforeRouteLeave：通常用来禁止用户在未保存修改前突然离开。

遇到的困难与思考

对于路由守卫，社区里有很多争论。有人说它是未来，有人说它是过度设计。因为实际上后端配置JWT的情况下，并不需要这玩意。我个人认为，你还是要遇到回传需求的，这玩意总是有用的，而且并不是所有的服务都有完整后端。