NUXT 3 : Comment utiliser le middleware de routage dans la mise en page ? (Puis-je?)

Question

Je cherchais à utiliser le middleware Nuxt dans ma mise en page. Mais je ne sais pas si c'est possible, mais, puisque je l'ai utilisé dans Nuxt 2, cela pourrait être possible dans Nuxt 3.

Ce projet se décline en 2 mises en page différentes : Public.vue 和 Admin.vue. Je souhaite uniquement utiliser le middleware dans les pages utilisant Gérer la mise en page. Parce que la page qui l'utilise n'est accessible qu'aux utilisateurs connectés et que la vérification est effectuée à l'intérieur du middleware.

J'ai essayé ceci (ne fonctionne pas) :

Gérer la mise en page|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 | adminAuth.ts

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

Answer 1

Le middleware ne peut pas être utilisé dans les mises en page car le middleware ne peut être utilisé que dans les pages, mais vous pouvez essayer cette méthode.

En déclarant .global 后缀来创建全局中间件，例如 auth.global.ts après le nom du fichier middleware.

Dans les fichiers auth.global.ts, vous pouvez utiliser des éléments de mise en page comme logique pour simuler comme si le middleware était dans vos paramètres de mise en page.

L'exemple de logique est comme ceci

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

J'espère que cela aide

Answer 2

Vous ne pouvez pas. Le middleware ne fonctionne que sur les pages.

Au lieu de cela, créez un composant Page parent à l'aide du middleware d'authentification et du composant NuxtPage à l'intérieur du modèle. Pour plus d'informations sur le Nested Routing, consultez la documentation Nuxt 3.

Exemple :

/pages/admin.vue(itinéraire => /admin)

sssccc

/pages/admin(dossier)

admin/order.vue itinéraire => /admin/orders

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