Nuxt2 CompositionAPI 如何实现异步布局中间件？

• 中间件定义：正常在middleware目录下创建异步中间件，使用defineNuxtRouteMiddleware包裹，直接声明async即可，不需要额外配置。你之前了解到的「返回Promise即可」的方案对布局中间件同样适用，本质上async函数的返回值就是Promise，不需要额外手动封装返回：

// middleware/[自定义中间件名].js
export default defineNuxtRouteMiddleware(async (to, from) => {
  // 此处正常编写异步逻辑，比如鉴权请求、数据预拉取
  const authRes = await $fetch('/api/user/auth')
  // 路由跳转逻辑按标准写法调用navigateTo即可
  if (!authRes.hasLogin) {
    return navigateTo('/login')
  }
})

• 布局注册：在对应布局文件的definePageMeta中声明middleware属性，值为你定义的中间件名称，多个中间件可传入数组：

<!-- layouts/[对应布局名].vue -->
<script setup>
definePageMeta({
  // 单个中间件写法
  middleware: '自定义中间件名'
  // 多个中间件写法：middleware: ['mid1', 'mid2']
})
</script>

<template>
  <div>
    <slot />
  </div>
</template>

• 常见失效排查点：
  • 不要将definePageMeta配置写在页面文件中，需写在对应布局的script setup作用域内
  • 异步逻辑需正确添加await关键字，未等待的异步操作会被Nuxt直接忽略
  • 嵌套布局场景下，中间件需配置在最顶层父布局中才能在所有子布局/页面生效

如果你使用的是Nuxt2版本，布局中间件同样支持async声明，直接导出async函数即可，配置方式保持不变。

内容的提问来源于stack exchange，提问作者Justin