Protéger les routes avec les Navigarion Guards de Vue.js

Les Navigation Guards de Vue.js sont des fonctions qui permettent de contrôler l'accès aux routes d'une application en fonction de certaines conditions, telles que l'authentification de l'utilisateur ou ses permissions. Elles offrent une sécurité accrue en empêchant l'accès non autorisé à certaines sections de l'application.

Types de Navigation Guards

Vue.js propose trois types principaux de guards :

• Guards Globaux : Ils s'appliquent à toutes les navigations de l'application. Par exemple, router.beforeEach est une fonction qui s'exécute avant chaque navigation et peut être utilisée pour vérifier si un utilisateur est authentifié avant de lui permettre d'accéder à une route.

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next({ name: 'Login' });
  } else {
    next();
  }
});

Dans cet exemple, si la route nécessite une authentification (requiresAuth) et que l'utilisateur n'est pas authentifié, il est redirigé vers la page de connexion.

• Guards par Route : Définis directement dans la configuration des routes, ils permettent de protéger des routes spécifiques.

const routes = [
  {
    path: '/admin',
    component: AdminComponent,
    beforeEnter: (to, from, next) => {
      if (isAdmin()) {
        next();
      } else {
        next({ name: 'Home' });
      }
    },
  },
];

Ici, avant d'accéder à la route /admin, la fonction beforeEnter vérifie si l'utilisateur a les droits d'administrateur. Sinon, il est redirigé vers la page d'accueil.

• Guards au Niveau du Composant : Ces guards sont définis directement dans les composants Vue et permettent de gérer la navigation à l'intérieur même des composants.

export default {
  // ...
  beforeRouteEnter(to, from, next) {
    // Logique avant que la route ne soit confirmée
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // Logique lors du changement de route
    next();
  },
  beforeRouteLeave(to, from, next) {
    // Logique avant de quitter la route actuelle
    next();
  },
};

Ces hooks permettent de gérer des actions spécifiques lors de l'entrée, de la mise à jour ou de la sortie d'une route au niveau du composant.

Utilisation des Navigation Guards pour la Protection des Routes

Les Navigation Guards sont couramment utilisés pour protéger certaines routes de l'application, notamment en fonction de l'état d'authentification de l'utilisateur. Par exemple, pour restreindre l'accès à une route aux seuls utilisateurs authentifiés, on peut utiliser un guard global ou un guard par route pour vérifier l'état de connexion de l'utilisateur et le rediriger si nécessaire.

Références:

• Surfside Media: Vue.js Routing Guards - Protecting Routes: https://www.surfsidemedia.in/post/vuejs-routing-guards-protecting-routes (page consultée le 21 mars 2025)
• InfiniteJS: Vue Router: Handling Route Protection for Single Page Applications: https://infinitejs.com/posts/vue-router-route-protection-spa/ (page consultée le 21 mars 2025)