---

Vous pouvez retrouver là documentation NuxtJS Middleware ici. Attention, à ne pas confondre avec serverMiddleware qui est différent !

NuxtJS propose une fonctionnalité de Middleware. Mais c'est quoi un Middleware ? Il s'agit d'une fonction exécutée avant que la page ou la route ne soit chargée.

Cela permet par exemple de vérifier qu'un utilisateur est connecté ou qu'il a les droits nécessaires (administrateur par exemple) pour consulter une page.

Création des Middlewares

Dans votre projet NuxtJS, vous devriez voir un dossier 'middleware' à la racine. C'est ici que vous pouvez créer votre middleware. Il s'agit simplement d'un fichier .js (que vous nommez comme vous le souhaitez).

Une fois votre fonction créée, n'oubliez pas de l'exporter ('export default')

// /middleware/exemple.js
export default function (context) {
    console.log("Notre middleware s'exécute ici !")
}

La chose la plus importante à savoir lorsqu'on utilise un Middleware, c'est que celui-ci doit absolument retourner une Promise si la fonction est async. Sinon, aucune obligation de return.

Ça sera le cas si, par exemple, vous effectuez un appel HTTP.

export default function (context) {
  return setTimeout(function () {
    console.log("Hello, World")
  }, 5000);
}

Le Middleware sera exécuté coté client si vous vous rendez sur une route, cependant celui-ci sera exécuté coté serveur si vous rafraîchissez la page!

Ajout de votre Middleware dans votre logique

Il existe trois façons d'utiliser votre Middleware : dans votre page, dans votre layout ou bien dans nuxt.config.js

Si vous souhaitez utiliser votre Middleware sur une seule route, vous pouvez le rajouter directement dans votre page :

<template>
  <h1>Hello, World</h1>
</template>

<script>
  export default {
    middleware: 'nomDeVotreMiddleware'
  }
</script>

Si vous souhaitez utiliser votre Middleware sur toutes vos routes, vous pouvez le rajouter dans votre nuxt.config.js :

export default {
  router: {
    middleware: 'nomDeVotreMiddleware'
  }
}

Ou bien dans un layout, de la même façon que pour une simple page.

Démo live : codesandbox.io/s/laughing-currying-tudrb?fi..