11528 sujets

JavaScript, DOM et API Web HTML5

Publier un message sur le profil de l'administrateur

Bonjour à tous
En voulant publier un message sur le profil de l'administrateur j'ai dans mon navigateur un souci m'indiquant Erreur lors de la récupération des messages : Error: Token non valide
at loadMessages (scripts.js:671:15)
at HTMLDocument.<anonymous> (scripts.js:699:3). Mon problème proviendrai soit du token soit du Load Messages. Pouvez vous m'aider svp? Merci à tous. Voici mon code 

[b]**// 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");

  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();
});
**[/b]
Bonjour suite à mon dernier message, je suis toujours coincé sur mon problème de publication de message. Dans le navigateur, il m'indique Erreur lors de la récupération des messages : Error: Token non valide
at loadMessages (scripts.js:671:15)
at HTMLDocument.<anonymous> (scripts.js:699:3). Mon problème proviendrai soit du token soit du Load Messages. j'ai essayé de bidouiller mais je n'ai pas réussi et c'est de pire en pire. Je me posais la question si je ne dois pas créer côté backend un fichier "middleware" pour l'authentification du token et ainsi pour que la publication des messages soit ainsi validé. Je l'avais inclus directement dans le serveur.js mais je me demande si cette partie je ne dois faire à part. Qu'en pensez vous? Merci beaucoup pour votre aide. Je vous montre mon code côté serveur
**// 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",
});
}
});
**
Prévenir un modérateur
Répondre au sujet
Aller à