NUXT 3：如何在布局中使用路由中间件？（我可以吗？）

Question

我一直在寻找在布局中使用 Nuxt 中间件。但我不确定我是否可以，但是，因为我在Nuxt 2中使用了它，所以在Nuxt 3中可能是可能的。

该项目有 2 种不同的布局：Public.vue和Admin.vue。我只想在使用管理布局的页面中使用中间件。因为使用它的页面只能由登录用户访问，并且它将在中间件内部进行检查。

我尝试过这个（不起作用）：

管理布局| 管理.vue

<template>
  <div>
    <client-only>
      <admin-header />
    </client-only>
    <main>
      <slot />
    </main>
    <client-only>
      <admin-footer />
    </client-only>
  </div>
</template>

<script lang="ts">
import AdminHeader from "~~/components/admin/Header.vue"
import AdminFooter from "~~/components/admin/Footer.vue"

definePageMeta({
  middleware: "admin-auth"
});
</script>

中间件| adminAuth.ts

export default defineNuxtRouteMiddleware((to, from) => {
    console.log(to);
    console.log("Acessando o admin auth middleware");
})

Answer 1

你不能。中间件仅适用于页面。

NuxtPage相反，在模板内使用 auth 中间件和组件创建一个父 Page 组件。有关嵌套路由的更多信息，请参阅 Nuxt 3 文档。

例子：

/pages/admin.vue（路线 => /admin）

<template>
  // you can add auth based components as well
  <NuxtPage />
</template>

<script setup lang="ts">
  definePageMeta({
     middleware: "admin-auth"
  });
</script>

/pages/admin（文件夹）

admin 文件夹内的所有其他组件将使用您的身份验证中间件

admin/order.vue 路由 => /admin/orders

admin/page.vue 路由 => /admin/some-route

Answer 2

布局中无法使用中间件，因为中间件只能在页面中使用，但您可以尝试使用此方法。

通过在中间件文件名后声明后缀来创建全局中间件.global，例如auth.global.ts.

在auth.global.ts文件中，您可以使用布局元作为逻辑来模拟，就好像中间件位于您的布局设置中一样。

示例逻辑是这样的

export default defineNuxtRouteMiddleware((to, from) => {
    const user = useUserStore();
    
    if (!user && to.meta.layout === auth) {
        return navigateTo("/login");
    }
});

希望这可以帮助