NUXT 3：如何在版面配置中使用路由中介軟體？（我可以嗎？）-PHP中文網路問答

文章專題學習下載問答程式設計字典遊戲最近更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)

NUXT 3：如何在版面配置中使用路由中介軟體？（我可以嗎？）

P粉619896145 2023-10-26 12:57:37

524

我一直在尋找在佈局中使用 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");
})

P粉619896145

全部回覆(1)

P粉6098665332023-10-27 11:44:26 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");
    }
});

希望這有幫助