Vue3路由守卫怎么使用 router.beforeEach 实现全局前置守卫-Vue.js-PHP中文网

router.beforeeach可实现全局前置守卫，每次路由跳转前自动执行，用于登录校验与权限控制；接收to、from、next三参数，依据meta.requiresauth等元信息判断是否放行或重定向至/login，须确保所有逻辑分支均调用next且避免重复调用。

vue3路由守卫怎么使用 router.beforeeach 实现全局前置守卫

直接用 router.beforeEach 就能实现全局前置守卫，它在每次路由跳转前自动执行，是做登录校验、权限控制最常用的方式。

核心写法和参数含义

注册守卫时传入一个回调函数，接收三个参数：

to：目标路由对象，含 path、name、meta 等信息
from：当前离开的路由对象
next：必须调用的导航控制函数，决定是否放行或跳转

常见判断逻辑写法

通常结合路由元信息（meta）做条件判断，比如：

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

检查 to.meta.requiresAuth 是否为 true，再读取本地 token 或 store 状态
若未登录且目标页需要认证，调用 next('/login') 或 next({ name: 'Login' })
若已登录或无需认证，统一调用 next() 放行
注意避免重复调用 next，所有分支都要覆盖到

典型使用示例

在 router.js 中配置：

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  if (to.meta.requiresAuth && !token) {
    next('/login')
  } else if (to.meta.roles && !token) {
    next('/login')
  } else if (to.meta.roles && token) {
    const userRole = JSON.parse(atob(token.split('.')[1])).role
    if (!to.meta.roles.includes(userRole)) {
      next('/403')
    } else {
      next()
    }
  } else {
    next()
  }
})