Discussion :

[StudyWeb]

Bonjour à tous,

Tout d'abord je travail sur un projet d'étude, qui comprends vue 3, express.js, j'ai choisi mysql avec sequelize.

Je suis actuellement sur la partie implémentation de l'authentification JWT . Dans la partie Frontend, ma page inscription fonctionne correctement. Il y a un blocage dans la page login, il me renvoie "TypeError: Cannot read properties of undefined (reading 'token')", suite à cette erreur tout est bloqué, sans token d'authentification dans le localstorage je ne peux pas faire ma fonction logout () pour supprimer le token du local storage et faire une redirection depuis vue.
Par contre quand je fais juste un essaie avec console.log(response) à l'intérieur de mon then depuis ma fonction login ( page view) j'ai bien un Token qui se génère et une redirection mais non optimal car, pas de button logout et la nav de présentation (home, inscription, login) est toujours présente. Alors que je dois incorporer des nouvelles routes.

Ma question :

Pourquoi le Token n'est pas prit en compte et renvoi undefined ?
Merci pour votre retour.

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
//--- Backend-express.js-Controllers user.js--//
exports.login = (req, res, next) => {
  // --Vérification de l'utilisateur depuis notre base de données--//
  User.findOne({ where: { email: req.body.email } })
 
    .then((user) => {
      if (!user) {
        return res.status(401).json({ error: "Utilisateur non trouvé !" });
      }
      bcrypt
        .compare(req.body.password_key, user.password_key)
        .then((valid) => {
          if (!valid) {
            return res.status(401).json({ error: "Mot de passe incorrect !" });
          }
 
          res.status(200).json({
            user,
            token: jwt.sign({ userId: user }, "RANDOM_TOKEN_SECRET", {
              expiresIn: "10h",
            }),
          });
        })
        .catch((error) => res.status(500).json({ error }));
    })
    .catch((error) => res.status(500).json({ error }));
};

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
// Backend-express.jsMiddleware d'authentification -//
 
 
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!"),
    });
  }
};

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
 
<script>// Frontend-vue -//
import axios from "axios";
 
export default {
  name: "LoginView",
 
  data() {
    return {
      login: {
        email: "",
        password: "",
      },
    };
  },
 
  methods: {
    submitLogin() {
      const login = {
        email: this.email,
        password_key: this.password_key,
      };
      axios
        .post("http://localhost:3000/api/auth/login", login)
        .then((response) => {
          console.log(response, "--------");
          let token = response.data.data.token;
 
          localStorage.setItem("user", token);
          this.$router.push("/profil");
        })
        .catch((error) => {
          alert("Vous n'ête pas inscrit");
          console.log(error);
        });
    },
  },
};
</script>

[NoSmoking]

Bonjour,
la fonction est asynchrone donc tu ne peux pas utiliser son résultat comme tu le fais.

Un truc du style, sans aucune garantie

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
jwt.verify(token, "RANDOM_TOKEN_SECRET", (err, decodedToken) => {
  if (err) {
    res.status(401).json({
      error: new Error("Invalid request!"),
    });
  }
  else {
    if (test_à_faire) {
      // là c'est bon
      next();
    }
  }
})

[StudyWeb]

Merci pour le retour.
Le problème vient alors sûrement du côté Back-end au niveau de ma fonction login avec la méthode sign, je vais revoir et modifier.

Le midellware Auth, que j'ai fais pour l'authentification par token qui sera rattaché à chaque route spécifique me semble correcte.

[StudyWeb]

J'ai réussi à stocker le Token dans mon local Storage et pour éviter la répétition dans chaque requête Axios je l'ai paramétré :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
import axios from "axios";
 
axios.defaults.headers.common["Authorization"] =
  "Bearer, " + localStorage.getItem("user");