Vue.js 实现一个简单的路由守卫鉴权系统-Vue.js-PHP中文网

vue.js路由守卫鉴权核心是router.beforeeach结合meta.requiresauth拦截：未登录且需鉴权则跳登录页并存redirect；已登录但角色不匹配（如meta.roles不含用户角色）则跳403；登录后根据query.redirect回跳原路径。

vue.js 实现一个简单的路由守卫鉴权系统

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）：

Revealjs Presentations

创建、编辑并部署 reveal.js 演示文稿为单个 HTML 文件，可选自定义 CSS。适用于需要制作演示文稿、幻灯片或宣传材料时使用。

下载

若目标路由不需要鉴权（!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
}

这样就能区分普通用户、管理员等不同访问级别，不复杂但容易忽略细节。