JavaScript async 函数中 await 怎么在路由守卫中使用-js教程-PHP中文网

在路由守卫中使用 await 需要确保守卫函数本身是异步的，即使用 async/await 语法或返回一个 promise。vue router 会自动等待异步操作完成后再进行导航，因此只需在守卫中直接调用异步函数并 await 其结果即可。

JavaScript async 函数中 await 怎么在路由守卫中使用

如何定义异步路由守卫

定义异步路由守卫非常简单，只需在 beforeEach 等钩子函数前加上 async 关键字。这样，当你在守卫内部使用 await 时，Vue Router 会暂停导航流程，直到 Promise 被 resolve 或 reject。如果 Promise 被 reject，导航将被取消；如果被 resolve，导航将继续。

JavaScript async 函数中 await 怎么在路由守卫中使用

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()，导航将不会继续，这通常用于显示错误提示或重定向到错误页面。

JavaScript 开发专家

掌握包含 ES6+、异步模式和 Node.js API 的现代 JavaScript。处理 Promise、事件循环和浏览器/Node 兼容性。在 JavaSc

下载

JavaScript async 函数中 await 怎么在路由守卫中使用

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');
  }
});