vue router导航守卫必须用async/await确保逻辑完整执行，避免卡死；守卫函数整体声明为async，所有分支返回明确结果，分阶段鉴权、显式处理错误超时，并精准保留回跳上下文。
不能靠“阻塞”来实现，而是用 await 确保导航逻辑完整执行，让 Vue Router 知道该等、等什么、等多久。关键不是暂停渲染，而是让路由跳转不提前触发、不漏分支、不卡死。
守卫函数必须整体声明为 async
Vue Router 4 支持在 beforeEach 和 beforeEnter 中直接使用 async/await，但前提是整个函数是 async，且所有分支都返回明确结果：
- ✅ 正确：函数返回 Promise，Router 会自动等待它 resolve/reject 后再继续导航
- ❌ 错误：只在某个 if 分支里调
next()，else 分支没处理 → 导航挂起，控制台报 “Navigation cancelled” - ⚠️ 注意：不 await 的 Promise（比如写成
fetch().then(...)）会被 Router 忽略，等于没等
鉴权流程要拆解为可 await 的原子步骤
别把 token 检查、用户拉取、角色比对全塞进一个请求。分阶段做，每步都可中断、可缓存、可兜底：
在SEO发布前，从路由清单生成XML网站地图和robots.txt
下载
当代理已经知道网站路由或内容URL，并且在启动前需要有效的sitemap XML、sitemap索引或robots.txt引用时，请使用sitemap。这是一个发布构件技能，而不是爬虫或SEO平台。
- 先同步读 localStorage 或 Pinia，有有效 token 才发起网络请求
- 用
axios.get('/api/auth/verify', { timeout: 5000 })控制单次等待上限 - 角色权限优先从
to.meta.roles读，避免每次跳转都查后端 - 若权限动态变更（如后台改了角色），通过 store 监听并主动
router.replace(to)触发守卫重跑
错误和超时必须显式处理，不能静默
鉴权失败或超时，页面不能白屏、不能停在上一页、不能只 console.error：
- try/catch 包住所有异步调用，捕获 401、网络断开、token 过期等场景
- 超时时显示轻提示：“权限校验中，请稍候…” 并支持手动重试
- 最终失败统一跳转到
/error?code=auth_failed，带参数便于埋点和排查 - 失败后清空本地 auth 状态（
localStorage.removeItem('token')），防止下次误判
登录回跳要保留完整目标上下文
用户未登录被拦截，登录成功后得精准回到原页面，包括参数、查询串、嵌套路由：
- 拦截时存
to.fullPath到 Pinia store（推荐）或sessionStorage（更安全） - 不要只存 path，要存完整路径，例如
/project/123/settings?tab=permissions - 登录页提交成功后，读取该值并
router.push(redirectUrl)，之后清空存储 - 如果 redirectUrl 是登录页自身，需 fallback 到首页，避免循环跳转
