全局前置守卫：beforeEach#

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

1
router.beforeEach((to) => {
2
  if (to.name !== 'Login' && !isAuthenticated) {
3
    return { name: 'Login' }
4
  }
5
})

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

比如，你忘记判断 to.name !== 'Login'，那么用户被重定向到 Login 页，再次触发 beforeEach，再次重定向……浏览器直接卡死，你也懵逼了。旧式的 next 参数仍受支持，但每条逻辑路径都必须且只能调用一次，直接返回目标路由更不容易写错。

组件内的守卫#

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

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

遇到的困难与思考#

路由守卫不能替代后端鉴权：后端仍要验证 Token 和资源权限，前端守卫负责提前拦截无权限页面、保存未提交状态或补齐跳转上下文。两边职责不同，不能因为已经用了 JWT 就把其中一边省掉。