Vue 路由守卫怎么使用 beforeEach 实现全局登录拦截-Vue.js-PHP中文网

全局登录拦截用beforeEach实现：先检查路由meta.requiresAuth，再校验token存在性、有效性及角色权限，失效时跳登录页并携带redirect参数实现自动返回。

vue 路由守卫怎么使用 beforeeach 实现全局登录拦截

用 beforeEach 实现全局登录拦截，核心是：在每次跳转前检查目标页面是否需要登录、用户有没有有效凭证，再决定放行还是跳转登录页。逻辑清晰，代码不长，但几个关键点容易出错。

怎么标记哪些页面需要登录？

在路由配置中给需要保护的页面加 meta.requiresAuth: true：

{
  path: '/order',
  name: 'OrderList',
  component: () => import('@/views/OrderList.vue'),
  meta: { requiresAuth: true }
},
{
  path: '/profile',
  name: 'Profile',
  component: () => import('@/views/Profile.vue'),
  meta: { requiresAuth: true }
}

这样就能统一识别“受保护路由”，不用每个路径单独判断。

守卫里怎么判断用户是否已登录？

常见做法是读取本地存储的 token 或用户信息：

从 localStorage 或 sessionStorage 取 token 字符串
更稳妥的做法是结合 Pinia/Vuex 状态管理，比如 userStore.token，避免多次读写 localStorage
注意：仅检查 token 存在还不够，token 可能已过期，后续需服务端验证（见下一点）

完整拦截逻辑怎么写？

推荐使用异步方式，兼顾 token 存在性、有效性、角色权限三重校验：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

router.beforeEach(async (to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  
  if (!requiresAuth) {
    next()
    return
  }

  const userStore = useUserStore()

  // 1. 没 token 直接去登录页，并带上当前地址，方便登录后返回
  if (!userStore.token) {
    next({ path: '/login', query: { redirect: to.fullPath } })
    return
  }

  try {
    // 2. 调接口拉取用户信息（自动校验 token 是否有效）
    await userStore.fetchUserInfo()
    
    // 3. 检查角色权限（如某些路由只允许 admin）
    const allowedRoles = to.meta.roles
    if (allowedRoles && !allowedRoles.includes(userStore.role)) {
      next('/403')
      return
    }

    next()
  } catch {
    // token 失效或网络异常 → 清除状态，跳登录
    userStore.logout()
    next({ path: '/login', query: { redirect: to.fullPath } })
  }
})

这个结构覆盖了真实项目中常见的边界情况：刷新页面、token 过期、权限不足、网络失败等。