在路由守卫中使用 await 需要确保守卫函数本身是异步的，即使用 async/await 语法或返回一个 promise。vue router 会自动等待异步操作完成后再进行导航，因此只需在守卫中直接调用异步函数并 await 其结果即可。
如何定义异步路由守卫
定义异步路由守卫非常简单，只需在 beforeEach 等钩子函数前加上 async 关键字。这样，当你在守卫内部使用 await 时，Vue Router 会暂停导航流程，直到 Promise 被 resolve 或 reject。如果 Promise 被 reject，导航将被取消；如果被 resolve，导航将继续。
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/home', component: Home },
{ path: '/profile', component: Profile, meta: { requiresAuth: true } }
]
});
// 模拟异步验证用户状态
async function checkUserAuth() {
return new Promise((resolve) => {
setTimeout(() => {
const isAuthenticated = localStorage.getItem('token') !== null;
resolve(isAuthenticated);
}, 500);
});
}
router.beforeEach(async (to, from, next) => {
if (to.meta.requiresAuth) {
const isValid = await checkUserAuth();
if (isValid) {
next();
} else {
next('/login');
}
} else {
next();
}
});
export default router;
如何处理异步守卫中的错误
在异步路由守卫中，如果 await 的 Promise 被 reject，Vue Router 默认会中断导航并可能抛出未捕获的异常。为了优雅地处理这种情况，可以使用 try...catch 块包裹异步调用。如果在 catch 块中没有调用 next()，导航将不会继续，这通常用于显示错误提示或重定向到错误页面。
立即学习“Java免费学习笔记（深入）”；
router.beforeEach(async (to, from, next) => {
try {
if (to.meta.requiresAuth) {
const isValid = await checkUserAuth();
if (!isValid) {
throw new Error('Unauthorized');
}
}
next();
} catch (error) {
console.error('Navigation failed:', error.message);
next('/error');
}
});
异步守卫对性能的影响
由于异步守卫会暂停导航直到异步操作完成，这可能会引入短暂的延迟，尤其是在网络请求较慢的情况下。为了优化用户体验，可以在异步操作期间显示加载指示器，或者使用缓存机制减少重复的异步调用。此外，避免在高频触发的守卫中进行耗时的异步操作，可以考虑将部分逻辑移至组件内部或使用预取策略。
