Vue.js路由守卫鉴权核心是router.beforeEach结合meta.requiresAuth拦截：未登录且需鉴权则跳登录页并存redirect；已登录但角色不匹配（如meta.roles不含用户角色）则跳403；登录后根据query.redirect回跳原路径。
Vue.js 中实现路由守卫鉴权，核心是利用 router.beforeEach 全局前置守卫，结合用户登录状态和路由元信息（meta.requiresAuth）做权限拦截。
定义需鉴权的路由
在配置路由时，为需要登录才能访问的页面添加 meta: { requiresAuth: true } 标识：
const routes = [
{ path: '/', component: Home },
{
path: '/dashboard',
component: Dashboard,
meta: { requiresAuth: true }
},
{
path: '/admin',
component: Admin,
meta: { requiresAuth: true, roles: ['admin'] }
}
]
在路由守卫中检查登录状态
使用 router.beforeEach 拦截导航，在跳转前判断是否已登录（例如检查 localStorage 或 pinia/vuex 中的 token）：
- 若目标路由不需要鉴权（
!to.meta.requiresAuth），直接放行 - 若需要鉴权但未登录，重定向到登录页，并把原目标路径存入
query.redirect，方便登录后回跳 - 若已登录但角色不匹配（如普通用户访问 admin 页面），可跳转 403 页面或首页
处理登录后的回跳逻辑
登录成功后，从 router.currentRoute.value.query.redirect 获取原始目标路径，用 router.push() 跳转过去；若无 redirect，则默认跳转首页：
立即学习“前端免费学习笔记（深入）”；
// 登录组件内
const login = async () => {
await api.login(credentials)
const redirect = router.currentRoute.value.query.redirect || '/'
router.push(redirect)
}
补充：支持角色权限细化
可在守卫中读取用户角色（如从 store 或 token 解析），再比对路由的 meta.roles：
const userRole = store.state.user.role // 或 jwt.decode(token).role
if (to.meta.roles && !to.meta.roles.includes(userRole)) {
next('/403')
return
}
这样就能区分普通用户、管理员等不同访问级别，不复杂但容易忽略细节。
