2

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>
2
  • Hola, bienvenido a Stack Overflow en español. Te invito a leer Cómo preguntar. En tu pregunta has colocado el código del backend. Podrías colocar el código del frontend? Es decir, ¿cómo haces las solicitudes a tu API? ¿Usas fetch, Ajax, xmlHttpRequest? Además dices que guardas el token en el localstorage. ¿Podrías subir el código de lo que haces en front? Saludos Commented el 25 jul. 2019 a las 18:00
  • Estoy usando fetch, ahi agregue la parte del front. Pero la duda es como hacer para que, al cambiar de ruta, envie el token como header del request, la forma que se me ocurre es con query string, pero lei en varios sitios que decian de almacenar y usar el token desde el local storage, y no se me ocurre como hacerlo.
    – Cuatrio
    Commented el 29 jul. 2019 a las 21:04

1 respuesta 1

0

Tuve el mismo problema y lo terminé resolviendo con cookies, no es el método mas seguro, pero funciona.

//Middleware encargado de verificar el token
function isAuth (req, res, next) {
  if (!req.cookies.token) {
    return res.status(403).json({ message: 'No tienes autorización' })
  }

  //const token = req.headers.authorization.split(' ')[1]
  // recupero el token de las cookies
  const token = req.cookies.token

  services.decodeToken(token)
    .then(response => {
    req.user = response
    next()
    })
    .catch(response => {
     res.status(response.status).send({message:'Token invalido'});
  })
}

El login sería casi igual, solo que en vez de enviar el token, lo almacenas en una cookie

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

    // almaceno la cookie, en este caso le puse que expire en 15 dias
    res.cookie('token', token,{ expires: new Date(Date.now() + (15*24*60*60*1000)) });
    res.status(200).send({
      message: 'Te has logueado correctamente',
      body: user
    })
  } catch (err) {
    res.status(500).send({ message: err })
  }
}

Para que esto funcione debes instalar npm i cookie-parser, requerirlo const cookieParser = require('cookie-parser'); y luego usarlo como middleware app.use(cookieParser());

Por cierto, veo que no estas usando ningún método de encriptación para el password, deberías usar alguno para mayor seguridad.

Espero que te sea de ayuda.

1
  • Gracias, no es exactamente lo que estaba buscando, pero lo voy a probar a ver que tal funciona
    – Cuatrio
    Commented el 29 jul. 2019 a las 21:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.