TD6: Branchement d'un front-end

Dans ce TD, nous allons brancher un front-end minimaliste à l'API que nous avons créée.

L'application que nous allons modifier ici se base sur du JavaScript "brut" (nous n'utiliserons pas de framework type Angular, Vue ou React). Vous constaterez vite que le code écrit de cette façon sera vite peu utilisable.

Mise en place

Installation du dépôt

Tout d'abord, forkez et clonez le dépôt suivant :

Lancez :

php -S localhost:9000

Votre front-end tourne désormais sur http://localhost:9000/.

Un problème de CORS

Constatez qu'aucun message n'apparaissent pas. Si vous observez les messages d'erreur, vous observerez quelque chose de similaire à :

Cette erreur vient du fait que le front-end (http://localhost:9000) n'est pas autorisé à communiquer avec le back-end (http://localhost:8000).

Pour ce faire, retournez dans le back-end, et lancez :

symfony composer req cors

Observez votre fichier .env: les origines locales sont acceptées par défaut par la politique CORS du bundle, ce qui devrait faire fonctionner le chargement des messages!

Recherche des messages

Constatez que la recherche par adresse ne fonctionne pas. Modifiez messages.js de manière à relancer la recherche lorsque le bouton de recherche est cliqué.

Connexion

Nous allons implémenter la page de connexion.

Modifiez:

  • login.js
    • Les identifiants saisis dans le formulaire seront passé à la méthode login de geochatAPI
    • Le bouton "Déconnexion" appelle la méthode logout de geochatAPI
  • api.js
    • La méthode login(email, password) appelle l'api /api/login
      • Si la réponse est un token, ce dernier est enregistré dans le localStorage,
      • Sinon, le message d'erreur (Identifiants incorrects!) apparaît.
    • Dans le constructeur, vous vérifierez si on est connectés en vérifiant la présence du jeton dans le localStorage,
    • La méthode logout enlève le jeton du localStorage.

Note: pensez à appeler set_is_connected. Normalement, le menu en haut de la page devrait changer, y compris si vous naviguez entre les pages.

Publication de message

En modifiant post.js, gérez la publication des messages à travers l'API en envoyant une requête qui inclura le jeton d'identification Bearer dans les en-têtes.

Pensez à gérer les erreurs que vous le serveur vous retournera, vous pouvez par exemple les afficher comme ceci: