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

#