核心是用全局前置守卫router.beforeeach拦截跳转，通过to.matched.some(r => r.meta.requiresauth)判断权限，实时读取token校验登录态，重定向时携带to.fullpath确保回跳完整，且登录页需显式放行防死循环。
核心是用全局前置守卫 router.beforeEach 拦截跳转，判断登录状态和目标路由权限，再决定放行、重定向或取消。关键不在“跳”，而在“什么时候不跳”。
明确哪些页面需要登录
在路由配置中统一标记：
比如给后台页加 meta: { requiresAuth: true }，登录页、注册页、404页等保持无 meta 或显式设 requiresAuth: false
- 避免硬编码路径判断（如
to.path !== '/login'），后期改路径易出错 - 用
to.matched.some(r => r.meta.requiresAuth)更可靠，匹配整个路由记录链 - 公开页面建议集中管理，例如：
const publicPaths = ['/login', '/register', '/reset']
守卫里实时校验登录状态
不要依赖初始化时缓存的 token 或 flag，每次导航都重新读取：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 从 localStorage / sessionStorage / Cookie 中取 token，或调用
getToken()工具函数 - 推荐双重验证：比如同时检查
Cookies.get('isAuthenticated')和localStorage.getItem('userToken') - 若使用 Pinia/Vuex，也应通过 getter 实时获取，而非直接读 state 属性
重定向时带返回地址
用户跳转到登录页后，要能回到原页面。不是靠 history.back()，而是把目标路径存在 query 里：
- 重定向写法：
next({ path: '/login', query: { redirect: to.fullPath } }) - 登录成功后，在登录组件里：
this.$router.push(this.$route.query.redirect || '/') - 注意：
to.fullPath包含 hash 和 query，适合完整还原；若只需路径，可用to.path
防死循环的三个硬性规则
登录页自己被反复重定向，是线上高频崩溃原因：
- 守卫开头就加判断：
if (to.name === 'Login' || to.path === '/login') { next(); return; } - 所有重定向逻辑必须包裹在
requiresAuth为 true 且未登录的条件下，不能反向写“如果不是登录页就跳登录页” - 重定向目标必须是已注册的有效路由，避免
next('/xxx')导致 404 → 再次触发守卫 → 循环
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
