NUXT 3: Wie verwende ich Routing-Middleware im Layout? (Kann ich?)

Question

Ich habe versucht, Nuxt-Middleware in meinem Layout zu verwenden. Ich bin mir aber nicht sicher, ob es möglich ist, aber da ich es in Nuxt 2 verwendet habe, könnte es in Nuxt 3 möglich sein.

Dieses Projekt gibt es in 2 verschiedenen Layouts: Public.vue 和 Admin.vue. Ich möchte Middleware nur in Seiten verwenden, die Layout verwalten verwenden. Denn auf die Seite, die es verwendet, können nur angemeldete Benutzer zugreifen und die Prüfung erfolgt innerhalb der Middleware.

Ich habe Folgendes versucht (funktioniert nicht):

Layout verwalten|manage.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>

Middleware |

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）

/pages/admin（文件夹）

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

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