Le stockage du JWT avec Vue renvoie undefined
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:
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:
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:
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> |
Le stockage du jwt avec vue
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.
