Forum : 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

**// 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();
});
**

2 réponses

Glim

Réponse acceptée

Bonjour,

Dans le code que tu nous montres, le token n'est pas stocké dans le localStorage. Est-ce que en debugguant, tu peux confirmer que celui-ci est stocké dans le localStorage avant les appels à localStorage.getItem("token") ? Est-ce qu'il est bien enregistré avec la clé "token" ?

Peux-tu debugguer pour déterminer plus précisément quel est l'appel problématique ? Par exemple en mettant des console.log ou en modifiant le message d'erreur "Token non valide" afin que l'on sache lequel pose problème ?

juan.3594

Auteur

Bonjour Glim je vais essayer de faire un debuggage sur mon scripts.js. J'avais pensé si mes erreurs ne provenait pas aussi côté serveur car j'avais mis des authenticate token sur les app.post ou app.get ce qui me provoquerait peut être les "token non valide". Je te montre mon code pour cette partie :

**// 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",
});
}
});
**
Qu'en penses tu? Merci à toi