document.addEventListener("DOMContentLoaded", function () {
  const postMessageForm = document.getElementById("postMessageForm");
  const messagesList = document.getElementById("messagesList");

  if (postMessageForm) {
    postMessageForm.addEventListener("submit", async function (event) {
      event.preventDefault();
      const formData = new FormData(postMessageForm);
      const payload = Object.fromEntries(formData.entries());

      // champ de message vide
      if (!payload.message.trim()) {
        alert("Veuillez entrer un message");
        return;
      }

      try {
        const token = localStorage.getItem("token");
        if (!token) {
          throw new Error("Token non valide");
        }

        const response = await fetch("http://localhost:3000/api/messages", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${token}`,
          },
          body: JSON.stringify(payload),
        });
        const data = await response.json();
        if (response.ok) {
          alert("Message publié avec succès!");
          postMessageForm.reset();
          loadMessages();
        } else {
          alert("Erreur lors de la publication du message : " + data.message);
        }
      } catch (error) {
        console.error("Erreur lors de la publication du message : ", error);
        alert("Erreur lors de la publication du message : " + error.message);
      }
    });
  }

  // Charger les messages lors du chargement de la page
  async function loadMessages() {
    try {
      const token = localStorage.getItem("token");
      if (!token) {
        throw new Error("Token non valide");
      }

      const response = await fetch("http://localhost:3000/api/messages", {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
      });

      if (!response.ok) {
        throw new Error("Problème pour obtenir les messages");
      }

      const data = await response.json();
      messagesList.innerHTML = ""; // Vider la liste des messages avant de remplir la liste avec les nouveaux messages
      data.forEach((message) => {
        const li = document.createElement("li");
        li.textContent = message.message;
        messagesList.appendChild(li);
      });
    } catch (error) {
      console.error("Erreur lors de la récupération des messages : ", error);
      alert("Erreur lors de la récupération des messages : " + error.message);
    }
  }

  loadMessages();
});

-
Edité par JuanGimenez3 26 décembre 2024 à 10:03:55

Bonjour.

Ligne 20 : A priori, cette exception est retournée si le l'item "token" du localStorage est équivalent à null.

Bonjour Domi65

Merci pour ta réponse

Oui apparemment ça serait sur cette ligne qui me pose problème. J'ai essayé de bidouiller mais j'ai toujours mon souci avec le token. Peux tu m'aider?

Merci

**// Middleware pour l'authentification
const authenticateToken = async (req, res, next) => {
const token = req.headers["authorization"]?.split(" ")[1];
if (!token) return res.status(401).json({ error: "Token non fourni" });
try {
const user = jwt.verify(token, process.env.JWT_SECRET);
req.user = user;
next();
} catch (err) {
return res.status(403).json({ error: "Token invalide" });
}
};
** **// Route pour publier un message
app.post("/api/messages", authenticateToken, async (req, res) => {
try {
const { content } = req.body;
const message = new Message({ content, senderId: req.user.id });
await message.save();
res.json({ success: true, message: "Message publié avec succès" });
} catch (err) {
console.error("Erreur lors de la publication du message :", err);
res.status(500).json({
success: false,
message: "Erreur lors de la publication du message",
});
}
});
// Route pour récupérer les messages publiés
app.get("/api/messages", authenticateToken, async (req, res) => {
try {
const messages = await Message.find().sort({ createdAt: -1 });
res.json(messages);
} catch (err) {
console.error("Erreur lors de la récupération des messages :", err);
res.status(500).json({
success: false,
message: "Erreur lors de la récupération des messages",
});
}
});
**

Bonsoir,

>> il m'indique Erreur lors de la récupération des messages : Error: Token non valide >at loadMessages (scripts.js:671:15)

Quelle est la ligne :671?

>> j'ai essayé de bidouiller mais je n'ai pas réussi et c'est de pire en pire.

C'est à vous à utiliser un Token valide pour votre API. On ne saurait le dire à votre place. Fournissez un code ou nous pourrions reproduire le problème que vous rencontrez. 

Indentez votre code, il est illisible en l'état.

PS : Pas de réponse à la question de parsimonhi pour ce sujet? 

@Marie-ThérèseDebray Merci de ne pas squatter le sujet des autres. Créer votre propre sujet. 

Bonjour AbcAbc6

En fait cette "ligne 671" concerne cette partie là où il m'indique "problème pour obtenir les messages. Veuillez réessayer plus tard".  Mon but est que je souhaite publié comme message "un Bonjour" dans le profil de l'administrateur et que ce token puisse être validé. Je suis débutant et je ne sais pas comment faire? Serait-il possible de m'aider SVP? Merci beaucoup. Et désolé je n'avais pas vu la réponse de ParsiMonhi au début. Merci d'avance pour votre aide. if (!response.ok) {

-
Edité par JuanGimenez3 27 décembre 2024 à 8:35:29

Bonjour,

>> Serait-il possible de m'aider SVP?

Pas sur que je puisse, je n'utilises pas JS coter serveur. On ne dispose pas de l'API pour faire des tests, on ne dispose que d'une partie du code.

Il me semble qu'en premier lieu, il faut s'occuper de ce token. Il faut que le serveur puisse répondre de manière appropriée en cas de token valide ou invalide. 

Ensuite s'occuper du reste, c'est à dire le transfère d'un message. N'aviez vous pas réussi pour une autre partie de votre application?

PS : Quand vous postez du code sur le forum, toujours utiliser le bouton code </>. Sinon je pourrais modéré.

-
Edité par AbcAbc6 27 décembre 2024 à 8:46:35

<< Ensuite s'occuper du reste, c'est à dire le transfère d'un message. N'aviez vous pas réussi pour une autre partie de votre application?

Suite à cette question, non c'est la première fois que ça m'arrive.

Côté serveur, je viens de créer un fichier middleware.js correspondant à ceci.

// Middleware.js côté serveur

import jwt from "jsonwebtoken";

const authenticateToken = (req, res, next) => {
  const token = req.headers["authorization"]?.split(" ")[1];

  if (!token) return res.status(401).json({ error: "Token non fourni" });

  try {
    const user = jwt.verify(token, process.env.JWT_SECRET);
    req.user = user;
    next();
  } catch (error) {
    return res.status(403).json({ error: "Token invalide" });
  }
};

export default authenticateToken;

Je l'ai ensuite importé dans mon serveur

// Serveur

import express from "express";
import path from "path";
import dotenv from "dotenv";
import bcrypt from "bcrypt";
import jwt from "jsonwebtoken";
import mongoose from "mongoose";
import nodemailer from "nodemailer";
import cors from "cors";
import { body, validationResult } from "express-validator";
import authenticateToken from "./authmiddleware.js";

Et ensuite une route pour valider les token 

// Serveur 
// Route pour validation du token
app.post("/api/verifyToken", authenticateToken, (req, res) => {
  res.json({ message: "Token valide" });
});

Mais dans le navigateur j'ai toujours un token non valide que je n'arrive pas à solutionner par rapport aux transfère du message qui proviendrait de cette partie du script. J'ai entretemps rajouter des petites pour vérifier le token 

//Javascript

// formulaire pour publier un message sur le profil de l'administrateur
document.addEventListener("DOMContentLoaded", function () {
  const postMessageForm = document.getElementById("postMessageForm");
  const messagesList = document.getElementById("messagesList");

  async function isValidToken(token) {
    try {
      const response = await fetch("http://localhost:3000/api/verifyToken", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
      });
      if (!response.ok) {
        console.warn("Token non valide");
        return false;
      }
      return true;
    } catch (error) {
      console.warn("Erreur lors de la vérification du token : ", error);
      return false;
    }
  }

  if (postMessageForm) {
    postMessageForm.addEventListener("submit", async function (event) {
      event.preventDefault();
      const formData = new FormData(postMessageForm);
      const payload = Object.fromEntries(formData.entries());

      if (!payload.message.trim()) {
        alert("Veuillez entrer un message");
        return;
      }

      // Message de débogage
      try {
        const token = localStorage.getItem("token");
        console.log("Token récupéré :", token);

        if (!token) {
          console.warn("Token non valide");
          alert("Token non valide. Veuillez vous reconnecter.");
          return;
        }
        const isValid = await isValidToken(token);
        if (!isValid) {
          console.warn("Token non valide");
          alert("Token non valide. Veuillez vous reconnecter.");
          return;
        }

        const response = await fetch("http://localhost:3000/api/messages", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${token}`,
          },
          body: JSON.stringify(payload),
        });
        const data = await response.json();
        if (response.ok) {
          alert("Message publié avec succès!");
          postMessageForm.reset();
          loadMessages();
        } else {
          alert("Erreur lors de la publication du message : " + data.message);
        }
      } catch (error) {
        console.error("Erreur lors de la publication du message : ", error);
        alert("Erreur lors de la publication du message. Veuillez réessayer.");
      }
    });
  }

  async function loadMessages() {
    try {
      const token = localStorage.getItem("token");
      console.log("Token récupéré pour charger les messages :", token); // Message de débogage

      if (!token) {
        console.warn("Token non valide");
        alert("Token non valide. Veuillez vous reconnecter.");
        return;
      }

      const isValid = await isValidToken(token);
      if (!isValid) {
        console.warn("Token non valide");
        alert("Token non valide. Veuillez vous reconnecter.");
        return;
      }

      const response = await fetch("http://localhost:3000/api/messages", {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
      });

      if (!response.ok) {
        console.warn("Problème pour obtenir les messages");
        alert(
          "Problème pour obtenir les messages. Veuillez réessayer plus tard."
        );
        return;
      }

      const data = await response.json();
      messagesList.innerHTML = "";
      data.forEach((message) => {
        const li = document.createElement("li");
        li.textContent = message.content;
        messagesList.appendChild(li);
      });
    } catch (error) {
      console.error("Erreur lors de la récupération des messages : ", error);
      alert(
        "Erreur lors de la récupération des messages. Veuillez réessayer plus tard."
      );
    }
  }

  loadMessages();
});

PS : je viens d'utiliser le bouton </> pour coller mes codes. Cela vous conviendrai comme ça? Après je ne sais pas comment les modéré. Merci à vous.