Étape 21 — Récapitulatif séquences 6-7 et transposition

Ces concepts sont avancés

Les formulaires, l'authentification et la suppression sont présentés pour compléter la culture technique et préparer l'oral. Ils ne sont pas requis dans le projet personnel.

Ce que vous avez vu en démo

Séquence 6 — Formulaires et validation

Concept	Ce qu'il faut retenir
v-form + @submit.prevent	Empêche le rechargement de la page, permet la validation
:rules	Tableau de fonctions qui valident un champ (retourne true ou un message d'erreur)
formRef.validate()	Vérifie toutes les règles avant soumission
v-text-field, v-textarea, v-select	Composants Vuetify pour les formulaires
v-snackbar	Message de confirmation temporaire
axios.post	Envoi de données au serveur (création)
Validation client vs serveur	La validation côté client améliore l'UX, mais le serveur doit toujours re-vérifier

Séquence 7 — Authentification et suppression

Concept	Ce qu'il faut retenir
Store d'authentification	Gère user, token, isAuthenticated
localStorage	Persiste le token entre les rechargements de page
router.beforeEach	Guard de navigation — vérifie les droits avant chaque changement de route
v-if="authStore.isAuthenticated"	Affichage conditionnel selon l'état de connexion
v-dialog	Boîte de dialogue modale pour confirmer les actions destructives
axios.delete	Suppression de données sur le serveur

Transposition au projet personnel

Ces fonctionnalités ne sont pas requises dans votre projet individuel. Cependant, si vous souhaitez les implémenter pour enrichir votre projet :

1. Formulaire d'ajout : adaptez les champs à votre thème (recettes, films, jeux, etc.)
2. Validation : définissez des règles pertinentes pour vos données
3. Authentification : vous pouvez reprendre le même mécanisme factice
4. Suppression : ajoutez un dialogue de confirmation pour toute action destructive

Questions pour l'oral

Ces questions couvrent les concepts des séquences 6 et 7. Préparez-vous à y répondre.

Formulaires et validation

1. Quel est le rôle de @submit.prevent sur un formulaire ?

   • Empêcher le rechargement de la page lors de la soumission et exécuter une fonction JavaScript à la place.

2. Comment fonctionne la validation avec :rules dans Vuetify ?

   • On passe un tableau de fonctions. Chaque fonction reçoit la valeur du champ et retourne true si la valeur est valide, ou un message d'erreur (string) sinon.

3. Pourquoi la validation côté client ne suffit-elle pas ?

   • Un utilisateur peut contourner la validation côté client (DevTools, requête API directe). Le serveur doit toujours re-vérifier les données pour garantir l'intégrité.

4. Quel est le rôle du v-snackbar ?

   • Afficher un message temporaire de confirmation ou d'erreur, sans bloquer l'interface.

5. Quelle différence entre axios.get et axios.post ?

   • GET récupère des données depuis le serveur. POST envoie des données au serveur pour créer une nouvelle ressource.

Authentification et guards

6. Qu'est-ce qu'un guard de navigation dans Vue Router ?

   • Une fonction qui s'exécute avant chaque changement de route. Elle peut autoriser la navigation, la bloquer ou rediriger vers une autre page.

7. À quoi sert router.beforeEach ?

   • À définir un guard global qui s'exécute avant chaque navigation. On l'utilise pour vérifier l'authentification et protéger certaines routes.

8. Comment le token est-il persisté entre les rechargements de page ?

   • On le stocke dans localStorage. Au chargement de l'application, on vérifie s'il existe et on restaure la session.

9. Pourquoi utiliser v-if plutôt que v-show pour masquer le bouton « Supprimer » ?

   • v-if retire complètement l'élément du DOM (plus sécurisé, l'élément n'existe pas). v-show le cache visuellement avec display: none mais il reste dans le DOM.

10. Pourquoi demander confirmation avant une suppression ?

    • Une suppression est irréversible. Le dialogue de confirmation protège contre les clics accidentels et donne à l'utilisateur une dernière chance d'annuler.