Bonjour à tous
Je suis débutant et j'aurais besoin de votre aide.
Je dois créer un projet de réseau social équivalent à facebook et je suis en train de créer le profil d'un membre utilisant boostrap 5.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. Voici mon code en javascript:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
// 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", response.status, data);
        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();
});
Je ne sais pas si ça provient du scripts en lui même ou sur nodeJs côté serveur. Côté backend je me suis crée un fichier middleware pour voir si ça proviendrai pas de là. Voici mon code
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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;
Et le serveur en lui même pour node.js
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 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",
    });
  }
});
Je voudrais que ce token puisse être validé mais je n'ai pas trouver de solution. Je ne sais pas si réinstaller un npm par rapport au token car dans package JSON j'ai seulement celle-ci
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"dependencies": {
    "bcrypt": "^5.1.1",
    "body-parser": "^1.20.3",
    "cors": "^2.8.5",
    "dotenv": "^16.4.5",
    "express": "^4.21.1",
    "express-validator": "^7.2.0",
    "jsonwebtoken": "^9.0.2",
    "mongoose": "^8.8.3",
    "nodemailer": "^6.9.15",
    "socket.io": "^4.8.0"
  },
  "devDependencies": {
    "nodemon": "^3.1.7"
  }
Merci à vous tous pour votre aide