全局登录拦截用beforeEach实现：先检查路由meta.requiresAuth，再校验token存在性、有效性及角色权限，失效时跳登录页并携带redirect参数实现自动返回。
用 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 或用户信息：
立即学习“前端免费学习笔记（深入）”；
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 从
localStorage或sessionStorage取 token 字符串 - 更稳妥的做法是结合 Pinia/Vuex 状态管理，比如
userStore.token，避免多次读写 localStorage - 注意：仅检查 token 存在还不够，token 可能已过期，后续需服务端验证（见下一点）
完整拦截逻辑怎么写？
推荐使用异步方式，兼顾 token 存在性、有效性、角色权限三重校验：
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 过期、权限不足、网络失败等。
别忘了登录页的跳转还原
用户从 /order 点链接跳到 /login 后，登录成功应自动回到 /order。实现方法很简单：
- 拦截时把
to.fullPath存进 query，如/login?redirect=/order - 登录组件里拿到
this.$route.query.redirect，登录成功后router.push(redirect || '/')
这样体验就自然了，用户不会因为登录中断操作流。
