Estoy intentando hacer un login utilizando json web token con node. Hasta ahora la parte del backend funciona, ya lo probe con postman.
El problema es que no se como manejarlo del lado del front con handlebars. Me logueo, si es correcto, el servidor me manda el token y lo almaceno en el localstorage. Pero como hago despues para agregarlo en los headers en cada cada peticion y en cada cambio de ruta?
//Middleware encargado de verificar el token
function isAuth (req, res, next) {
if (!req.headers.authorization) {
return res.status(403).json({ message: 'No tienes autorización' })
}
const token = req.headers.authorization.split(' ')[1]
services.decodeToken(token)
.then(response => {
req.user = response
next()
})
.catch(response => {
res.status(response.status).send({message:'Token invalido'});
})
}
Estas son las rutas
router.post('/login' async (req, res) => {
try {
const user = await User.find({ email: req.body.email, password: req.body.password });
if (!user.length) {
return res.status(404).send({message: 'Usuario y/o contraseña incorrecto'});
}
let token = service.createToken(user);
req.user = user
res.status(200).header('Authorization', `Bearer ${token}`).send({
message: 'Te has logueado correctamente',
token: token,
body: user
})
} catch (err) {
res.status(500).send({ message: err })
}
}
app.use(isAuth)
// Estas serian las rutas accesibles solo si estas logueado
router.get('/private' ...)
Este es el login del lado del front
<script type="text/javascript">
const formLogin = document.querySelector('#form-login')
formLogin.addEventListener('submit', async event => {
event.preventDefault()
let formData = new FormData(event.target);
const res = await fetch('/login', {
method: 'POST',
body: formData
})
const data = await res.json();
if (data.token) {
localStorage.setItem('token', data.token);
}
//console.log(data)
})
</script>
fetch
,Ajax
,xmlHttpRequest
? Además dices que guardas el token en ellocalstorage
. ¿Podrías subir el código de lo que haces en front? Saludos