After successfully logging in, I am attempting to retrieve the current user information using a JWT token. Despite saving the token in the browser, I encounter an error every time I send the request.
I can locate the token in my application tab on the console as follows:
token:eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI2MjM4NzA4ZDc2ZDVkMDJmZWMwNGRiZDEiLCJpYXQiOjE2NDgwODI3MTV9.xvFdGR8skZntTIdlo9aSCx90315rSoUxct_VIR9cf6Q
The error message displayed in my console when accessing the user route is:
{
"success": false,
"message": "Failed to authenticate"
}
This is the script tag used to retrieve the current user information:
<script>
import axios from "axios";
export default {
name: "HelloWorld",
data() {
return {
msg: "Welcome to Your Vue.js App"
};
},
mounted() {
axios
.get("http://localhost:5000/api/auth/user", {
headers: {
Authorization: "Bearer ${token}",
token: localStorage.getItem("token")
}
})
.then(res => {
console.log(res);
});
}
};
</script>
The backend route for authentication is as follows:
router.get("/auth/user", verifyToken, async (req, res) => {
try {
let foundUser = await User.findOne({
_id: req.decoded._id
}).populate(
"address"
);
if (foundUser) {
res.json({
success: true,
user: foundUser
});
}
} catch (err) {
res.status(500).json({
success: false,
message: err.message
});
}
});
The JWT middleware used to verify the token is shown below:
const jwt = require("jsonwebtoken");
module.exports = function (req, res, next) {
let token = req.headers["x-access-token"] || req.headers["authorization"];
let checkBearer = "Bearer ";
if (token) {
if (token.startsWith(checkBearer)) {
token = token.slice(checkBearer.length, token.length);
}
jwt.verify(token, process.env.SECRET, (err, decoded) => {
if (err) {
console.log(err)
res.json({
success: false,
message: "Failed to authenticate"
});
} else {
req.decoded = decoded;
next();
}
});
} else {
res.json({
success: false,
message: "No token Provided"
});
}
};
I'm baffled by why I keep receiving an error despite having the token saved in local storage.