Authentification in spa 🔐

// Hook de Navigation : Exécuté avant chaque navigation
router.beforeEach((to, from, next) => {
  // Étape 1: Accéder aux informations de l'utilisateur authentifié
  const authUser = store.getters["auth/authUser"];

  // Étape 2: Vérifier si la route nécessite une authentification
  const reqAuth = to.matched.some((record) => record.meta.requiresAuth);

  // Étape 3: Préparer l'objet de requête de redirection vers la page de connexion
  const loginQuery = { path: "/login", query: { redirect: to.fullPath } };

  if (reqAuth && !authUser) {
    // Étape 4: La route nécessite une authentification, mais l'utilisateur n'est pas authentifié
    // Étape 5: Dispatch de l'action pour obtenir les informations d'authentification de l'utilisateur
    store.dispatch("auth/getAuthUser").then(() => {
      // Vérifier à nouveau si l'utilisateur est authentifié après la résolution de l'action asynchrone
      if (!store.getters["auth/authUser"]) 
        // Étape 6: Redirection vers la page de connexion avec la redirection préparée
        next(loginQuery);
      else 
        // Étape 7: Utilisateur authentifié, permettre la continuation de la navigation
        next();
    });
  } else {
    // Étape 8: La route ne nécessite pas d'authentification, permettre la continuation de la navigation
    next(); // Assurez-vous toujours d'appeler next()!
  }
});