1

Estoy trabajando un proyecto en React que tiene un login, el cuál está conectado con un backend de nodejs que consume los datos desde MongoDB. Si ingreso datos correctos que estén registrados en la base de datos no se presenta ningún error y el usuario se puede loguear correctamente, pero si los datos son incorrectos o el campo de usuario o contraseña están vacíos me genera el siguiente error.

Error generado

En la consola me muestra que se está tratando de recorrer un JSON vacío como respuesta del servidor.

introducir la descripción de la imagen aquí

Ahí creo que se puede estar generando el error, y al mostrar los datos que me está regresando el json es undefined. Del lado del frontend este es el código que se encarga de procesar el logueo.


import decode from 'jwt-decode';

export default class AuthService{

    constructor(domain){
        this.domain = domain || "http://localhost:3000/api";
        this.requestFetch = this.requestFetch.bind(this);
        this.login = this.login.bind(this);
        this.logout = this.logout.bind(this);
        this.getProfile = this.getProfile.bind(this);
    }

    login(Usuario,Password){
        return this.requestFetch('/usuario/login',{
            method: 'POST',
            body: JSON.stringify({Usuario,Password})
        }).then(response=>{
            this.setToken(response.tokenReturn);
            this.setUser(response.user);
            return Promise.resolve(response);
        });
    }

    isLoggedIn(){
        return !!this.getToken();
    }

    setToken(token){
        localStorage.setItem('token_id',token);
    }

    getToken(){
        return localStorage.getItem('token_id');
    }

    setUser(userJSON){
        localStorage.setItem('user',JSON.stringify(userJSON));
    }



    getUser(){
       return JSON.parse(localStorage.getItem('user')); 
    }

    getUserAccess(){
        let user = this.getUser();
        if(user){
            return user.Rol;
        }else{
            return false;
        }
    }

    getProfile(){
        return decode(this.getToken());
    }

    logout(){
        localStorage.removeItem('token_id');
        localStorage.removeItem('user');
    }

    requestFetch(urlRelative,options){
        const headers = {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }

        if(this.isLoggedIn()){
            headers['token'] = this.getToken();
        }

        return fetch(this.domain+ urlRelative,{
            headers,
            ...options
        }).then(response=>response.json()).catch(
            error=> Promise.reject(error)
        )
    }

}

Y en el Backend este es el código que se encarga de procesar la petición y regresar la respuesta. Cuando el usuario está registrado regresa todos los datos que existen de ese usuario en la base de datos, cuando el usuario no existe regresa un 404.

login: async (req,res,next) => {
        try {

            let user = await models.findOne({Usuario: req.body.Usuario});
            console.log(req.body.Usuario);
            if (user){
                let match = await bcrypt.compare(req.body.Password,user.Password);
                if (match){
                    let tokenReturn = await token.encode(user._id);
                    res.status(200).json({user,tokenReturn});
                } else{
                    res.status(404).send({
                        message: 'Password Incorrecto'
                    });
                }
            } else{
                res.status(404).send({
                    message: 'No existe el usuario'
                });
            }
        } catch(e){
            res.status(500).send({
                message:'Ocurrió un error'
            });
            next(e);
        }
    }

Intente crear un condicional que ejecute getUser si la respuesta es diferente a undefined, pero el logueo deja de funcionar y siempre permite ingresar a los usuarios sin importar si está o no registrado.

1

1 respuesta 1

2

La corrección debe ser en el backend, debes usar un middleware para activar el cors

var express = require('express');
var app = express();

// esto es lo que debes agregar
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

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.