在导航守卫中不可直接使用 async/await 调用 token 校验接口，因 vue router beforeeach 不保证等待 promise 完成；正确做法是用 promise 封装校验流程，确保每个分支调用 next()，并处理白名单、超时、错误及业务态。
在导航守卫中直接调用接口校验 token 是可行的，但必须处理好异步逻辑，否则会出现导航跳转未等待校验完成、页面闪白、权限误放行或死循环等问题。核心原则是：所有异步操作必须在 next() 调用前完成，且不能遗漏任何分支的 next 调用。
为什么不能直接 await 一个 API 调用后 next()？
Vue Router 的 beforeEach 守卫本身不支持 async/await 语法（除非显式返回 Promise）。若写成：
❌ 错误写法（会跳过等待，导致未校验就放行）：router.beforeEach(async (to, from, next) => {<br> const res = await checkTokenApi(); // 接口调用<br> if (res.valid) next();<br> else next('/login');<br>});
该写法在 Vue Router 3 或部分兼容模式下可能“看似有效”，但实际属于未定义行为——Router 不保证等待这个 async 函数 resolve，极易造成 race condition。
正确做法：用 Promise 封装并显式 resolve
确保每个执行路径都调用 next，且异步校验完成后再决定跳转方向：
- 从 localStorage/sessionStorage 读取 token；若为空，直接 next('/login')
- 若 token 存在，发起校验请求（如
/api/auth/verify），用 Promise 包裹整个流程 - 请求成功且用户有效 → 检查角色权限（如
to.meta.roles），匹配则 next()，否则 next('/403') - 请求失败（401/403/网络错误）→ 清除本地凭证，跳转登录页：next({ path: '/login', query: { redirect: to.fullPath } })
- 任何未覆盖的异常分支（如 try/catch 漏掉）都必须有兜底 next('/login')，避免导航挂起
推荐结构：带 loading 状态与错误降级
为提升体验和健壮性，建议加入简易状态管理：
- 首次进入应用时，若 token 存在但尚未校验，可先显示骨架屏或 loading 微动效（配合 NProgress 或自定义 loading flag）
- 校验接口超时（如 8s）应主动 reject，防止用户长时间等待；可设置 axios timeout 并捕获 ERR_NETWORK 或 timeout
- 若校验接口返回 401，说明 token 过期或被废止，需同步清除
localStorage.token和 Pinia/Vuex 中的用户信息 - 对白名单路由（
/login、/public/*、/404）始终 next()，不触发校验，避免重定向循环
补充：避免常见陷阱
以下操作容易引发问题，需特别注意：
- 在守卫里重复调用 next（如 if-else 里都写了 next，又在 finally 再写一次）→ 报错 “next is called more than once”
- 把 token 校验逻辑放在 beforeResolve 或组件内守卫 → 权限控制滞后，用户可能看到页面再跳走，体验差且存在安全窗口
- 仅依赖前端时间戳判断 token 过期（如解析 JWT payload.exp）→ 不可靠，后端可能已提前作废，必须以接口响应为准
- 未处理 token 存在但用户被禁用、角色被回收等业务态 → 校验接口应返回完整用户状态，而不仅是“token 有效”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
