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

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

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

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

示例逻辑是这样的

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

希望这有帮助

Answer 2

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

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

示例：

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

sssccc

/pages/admin（文件夹）

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

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