Communication entre vuejs et express, envoyer les données du Token pour être authentifié

Bonjour

Je travaille avec le framework Vue 3 et express.js. C'est un projet ou je dois tout faire de A à Z, je dois créer moi-même les appel api.
J'ai décidé lors de la connexion de choisir l'Endpoint "profil".
Je rencontre un problème sur ma page profil, qui apparait après une connexion. Jusqu'ici , le Token est bien identifié et les infos s'affiche sur la page.

Coté Backend, lorsque je fais ma requête get pour authentifier l'utilisateur, donc recevoir les données utilisateur connectées, ce dernier me renvoi une erreur.
Depuis postman, en essayer la requête, avec Authorizing requests en mentionnant le Token stocké depuis le backend il devrait me retourner l'userId ( j'ai choisi de l'incorporer dedans), mais il me renvoi une erreur.

Je vous partage mon composant page profil de vue js, ensuite mon middleware pour authentifié chaque route, mon fichier routeur pour la partie user et enfin mon controllers user.

Je vois pas mon erreur.
router.get("/", auth, userCtrl.profil);

Code:

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
<script>
//composant profil
import axios from "axios";
import VueJwtDecode from "vue-jwt-decode";
 
export default {
  name: "ProfilConnect",
  data() {
    return {
      user: null,
    };
  },
 
  methods: {
    getUserDetails() {
      axios
        .get("http://localhost:3000/api/profil")
        .then((response) => {
          // get token from localstorage
          let token = localStorage.getItem("user");
          //decode token here and attach to the user object
          let decoded = VueJwtDecode.decode(token);
          this.user = decoded;
          console.log(response);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  //LIFECYCLE HOOK HANDLING
  created() {
    this.getUserDetails();
  },
};
</script>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
exports.profil = (req, res) => {
//backend
 // Vérifier si l' en-tête d' autorisation est disponible dans la requête //
 //Renvoie la charge utile décodée//
 // Si un userId correspond nous le recuperons depuis notre base de données //
//--- Si l'utilisateur est correctement récupéré nous l'appelons dans notre then --//
  User.findOne({ where: { userId: req.body.userId } })
    .then((user) => {
      if (user === null) {
        res.status(404).json({ msg: "Utilisateur non trouvé" });
      }
      res.status(200).json(user);
    })
    .catch((error) => res.status(500).json({ error }));
 
 
};

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
//middleware auth
const jwt = require("jsonwebtoken");
 
module.exports = (req, res, next) => {
  try {
    const token = req.headers.authorization.split(" ")[1];
    const decodedToken = jwt.verify(token, "RANDOM_TOKEN_SECRET");
    const userId = decodedToken.userId;
    if (req.body.userId && req.body.userId !== userId) {
      throw "Invalid user ID";
    } else {
      next();
    }
  } catch {
    res.status(401).json({
      error: new Error("Invalid request!"),
    });
  }
};