什么是路由独享守卫？在 index.js 中针对特定路径进行权限校验的实战

路由独享守卫：精准的权限守门员

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

在Vue Router的权限控制体系里，如果说全局守卫是负责全站安检的保安，那么路由独享守卫，就是派驻在特定“VIP房间”门口的专属门卫。它的职责非常明确：只为某一条具体的路由服务，只在用户试图访问该路由时触发。这种设计，尤其适合那些需要独立、特殊权限校验的敏感页面，比如后台管理面板、用户个人中心等。把校验逻辑直接写在对应的路由配置里，不仅维护起来一目了然，也有效降低了与全局逻辑的耦合度。

它长什么样？怎么配？

配置起来其实很直观。在你的路由配置文件（通常是router/index.js）里，找到routes数组，直接在需要守卫的那个路由对象上，添加一个beforeEnter函数即可。

• 这个函数接收三个固定参数：(to, from, next)。其中，to指向用户想去哪儿，from记录用户从哪儿来，而next则是决定是否放行的关键函数，必须被调用。
• 关键点在于，它必须定义在具体的路由对象内部，而不是像router.beforeEach那样挂在路由实例上。结构大致是：{ path: '/admin', component: ..., beforeEnter: ... }。
• 另外需要注意，它不支持直接使用async/await语法并返回Promise，异步操作需要手动处理，通过调用next()或next(false)来控制流程。

实战：给 /admin 路径加登录态校验

光说不练假把式。假设一个典型场景：你的后台管理页面/admin必须要求用户登录，且令牌（token）有效。我们可以这样实现：

{  path: '/admin',  name: 'Admin',  component: () => import('@/views/Admin.vue'),  beforeEnter: (to, from, next) => {    const token = localStorage.getItem('token')    if (!token) {      next({ name: 'Login', query: { redirect: to.fullPath } })      return    }    // 可选：检查 token 是否过期（比如解析 JWT payload）    try {      const payload = JSON.parse(atob(token.split('.')[1]))      if (Date.now() >= payload.exp * 1000) {        localStorage.removeItem('token')        next({ name: 'Login', query: { redirect: to.fullPath } })        return      }    } catch (e) {      next({ name: 'Login', query: { redirect: to.fullPath } })      return    }    next()  }}

• 当检测到本地没有token时，直接跳转到登录页，并通过query参数记录下用户原本想访问的路径（to.fullPath）。这样，用户登录成功后就能自动跳回，体验更流畅。
• 更进一步，我们还可以尝试解析JWT令牌，检查其是否已过期。如果解析失败或已过期，同样执行清理令牌并跳转登录的操作，防止无效凭证蒙混过关。
• 整个校验逻辑完全封装在这个路由内部，首页、文章页等其他路径的访问丝毫不受影响，这就是精准控制的魅力。

和全局守卫比，它有什么优势？

那么问题来了，既然有了全局守卫，为什么还需要独享守卫？答案就在于“精准”二字。当你只需要对少数特定页面进行拦截，而非全站统一处理时，独享守卫的优势就凸显出来了：

• 它避免了在全局守卫router.beforeEach里堆积大量if (to.name === 'xxx')的条件判断，让代码职责更清晰、更聚焦。
• 允许不同的页面拥有截然不同的准入规则。例如，/admin可能需要管理员权限，而/user/profile只需要普通用户登录即可。
• 配置与守卫逻辑放在一起，堪称“自解释文档”。任何开发者查看路由配置时，都能立刻明白访问这个页面需要满足什么前提条件，极大提升了代码的可读性和可维护性。
• 在Vue Router的导航解析流程中，它的执行顺序是：全局守卫 → 路由独享守卫 → 组件内守卫。这个顺序是可控且明确的，不必担心逻辑被其他守卫意外覆盖。

注意几个易错点

好用归好用，但在实际编码时，有几个细节坑点需要特别留意：

• next()函数必须调用，且只能调用一次。忘记调用会导致导航悬停卡死，而重复调用则会触发控制台警告。
• 不要在beforeEnter函数内部直接使用router.push来进行跳转。正确的做法是，将目标路径作为参数传递给next()函数，例如next({ path: '/login' })。
• 如果需要调用后端API进行异步权限验证，记得先使用next(false)暂时中止当前导航，等API返回结果后，再根据结果手动调用next()放行或next('/login')重定向。
• 在Vite + Vue 3的项目环境中，务必确认你的路由配置导出的是通过createRouter()创建的实例，并且beforeEnter是写在routes数组内的路由对象上，而不是路由实例本身。