Middlewares : qu'est-ce que c'est et comment les utiliser dans Nuxt.JS

Que sont les middlewares ?

Dans le Front-end, les Middlewares sont des blocs de code qui sont exécutés avant la navigation vers une nouvelle page, nous permettant d'effectuer divers contrôles dans notre application, tels que :

• Authentification : vérifie si l'utilisateur est connecté, sinon il est redirigé vers l'écran de connexion.
• Autorisation : vérifie si l'utilisateur a l'autorisation d'accéder à cette page, sinon, il est redirigé vers une page qui a l'autorisation.
• Journaux : enregistrez les informations sur les informations de la page.

Le middleware fonctionne comme une couche intermédiaire, agissant depuis le début du chargement de la page jusqu'à son rendu complet.

Cette fonctionnalité middleware est présente dans les frameworks Front-end modernes tels que Next.js et Nuxt.JS.

Dans cet article, je vais vous apprendre comment implémenter Route Middleware dans Nuxt.JS.

Middleware d'une manière pas si technique

Pour l'expliquer plus simplement, je vais utiliser une analogie :

Imaginez que vous souhaitiez participer à un parti, et dans ce processus vous passerez par trois employés de sécurité du parti, qui sont les "middlewares", et chacun sera responsable de réaliser une action spécifique.

1. Le premier agent de sécurité vérifiera si vous avez un ticket et s'il est valide, semblable à un middleware d'authentification, si vous n'avez pas de ticket, vous serez redirigé vers la billetterie ou l'écran de connexion.

2. Le deuxième agent de sécurité vérifiera si vous avez l'âge légal, condition essentielle pour accéder à la fête, similaire au middleware d'autorisation. Si vous n'avez pas l'autorisation nécessaire pour entrer, vous serez redirigé hors de la file d'attente.

3. Le troisième et dernier agent de sécurité vous remettra un bracelet d'identification qui signalera si vous avez accès à la zone VIP de la fête, à l'instar d'un middleware capable d'ajouter des données aux demandes.

Enfin, après avoir parcouru toutes les étapes précédentes, vous serez libre d'accéder à la salle des fêtes.

Types de middleware

Dans Nuxt.js, nous avons les types de middleware suivants :

• Mondial
• En ligne ou anonyme
• Nominés

1. Les middlewares globaux sont créés dans le dossier /middleware et exécutés sur toutes les pages. Vous devez ajouter le suffixe global.

/*
  Exemplo de middleware Global:
  Esse middleware verifica se a URL/rota buscada existe.
  Caso não exista o usuário é redirecionado para página de links.

  Nome e Diretório do arquivo:
  /middleware/notFound.global.js
*/

export default defineNuxtRouteMiddleware((to) => {
  const hasFoundRoute = to.matched.length > 0;

  if (!hasFoundRoute) {
    return navigateTo({
      path: "/links"
    });
  }
});

1. Les middlewares en ligne ou anonymes sont des middlewares spécifiques à une page, définis directement dans le fichier de la page dans Nuxt ; Cela limite la réutilisation du code car il ne peut pas être facilement partagé avec d'autres pages.

/*
  Exemplo de middleware inline:
  Esse middleware verifica se os dados estão presentes na store.
  Caso não esteja, os dados serão requisitados.
*/

<script setup lang="ts">
import { useStore } from 'vuex';

definePageMeta({
  middleware: [
    async function (to, from) {
      const store = useStore();
      if (!store.state.user) {
        await store.dispatch("fetchUser");
      }
    },
  ],
});
</script>

1. Les middlewares nommés sont créés dans le dossier /middleware.

/*
  Exemplo de middleware Nomeado:
  Esse middleware verifica o usuário está logado.
  Caso não esteja logado, ele é redirecionado para página de login.

  Nome e Diretório do arquivo:
  /middleware/auth.js
*/

export default defineNuxtRouteMiddleware((to, from) => {
  const { $store } = useNuxtApp();

  if (!$store.auth?.loggedIn) {
    return navigateTo("/login");
  }
});

Dans le Middleware nommé, il est nécessaire de définir quelles pages utilisent un certain middleware, une des façons de le faire est de modifier les fichiers des pages qui utiliseront ce middleware :

<script setup>
definePageMeta({
  middleware: "auth-admin"
});
</script>

Il est également important de dire que même si vous nommez les fichiers middleware selon des modèles comme PascalCase ou camelCase, les noms de fichiers sont normalisés selon le modèle kebab-case.

Conclusion

J'espère qu'avec cet article j'ai pu vous expliquer de manière simple et rapide les principaux points de création et d'utilisation de Middleware dans Nuxt.JS ??‍♂️.

Si vous avez besoin de plus d'informations sur le Middleware dans Nuxt.JS, vous pouvez rechercher dans la documentation officielle.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!