Rediriger les utilisateurs non connectés avec un middleware de route Nuxt

Comment rediriger les utilisateurs non connectés avant d'accéder à une page Nuxt ?

Avec un middleware de route.

Un middleware de route est une fonction appelée avant chaque navigation. Elle permet de rediriger l'utilisateur avant qu'il n'accède à la page. C'est l'équivalent d'un navigation guard avec Vue Router.

Ce que reçoit et renvoie un middleware

Le middleware de route reçoit la route de destination (to) et la route d'origine (from) :

Ce qu'il renvoie décide de la suite :

• rien : la navigation continue ;
• navigateTo('/login') : redirection, qui devient une vraie redirection HTTP quand elle a lieu côté serveur ;
• abortNavigation() : la navigation est stoppée, éventuellement avec une erreur.

Les trois sortes de middleware

Il existe trois sortes de middleware, selon l'endroit où on les déclare :

• inline : directement dans definePageMeta, pour être appliqué à une seule page ;
• nommés : un fichier dans middleware/ (par exemple auth.ts), activé page par page avec definePageMeta({ middleware: ['auth'] }) depuis la page en question ;
• globaux : un fichier suffixé .global (par exemple middleware/analytics.global.ts), exécuté à chaque changement de route. Utile pour les analytics par exemple.

Dans quel ordre sont-ils exécutés ?

Lorsqu'il y a plusieurs middlewares :

1. Les middlewares globaux sont exécutés en premier, par ordre alphabétique du nom de fichier, d'où l'intérêt d'utiliser des préfixes comme 01., 02..
2. Ensuite les middlewares nommés, dans l'ordre du tableau.
3. Enfin les middlewares inline.