1

al hacer una funcion que haga una llamada tipo post para permitir loguearse:

const loguearse = () => {
    let codeRes;
    alert("ESTOY DENTRO DE LA FUNCION");

    Axios.post("http://localhost:8080/auth/login", {
        email: user,
        password: pass,
    })
        .then((res) => {
            alert("ESTE ES LA RESPUESTA", res.ok);
            // codeRes = res.code;
        })
        .catch((e) => alert("ESTE ES EL ERROR::  ", e));

    return codeRes;
};

la cual se acciona al darle click a un boton:

onClick={() => {
   let codigo = loguearse();
   if (codigo === 200) {
   } else {
 }
}}

Al hacer una llamada usando insomnia si recibo una respuesta, pero al hacer axios.post(), recibo una res tipo object y si intento acceder a res.data es undefined, como podría tomar el codigo de la llamada y realizar un dependiendo si el codigo es 200 o no?

1 respuesta 1

1

Puedes probar algo así:

import "./App.css";
import Axios from "axios";
import { useState } from "react";

function App() {
  const [user, setUser] = useState("");
  const [pass, setPass] = useState("");

  const loguearse = async () => {
    try {
      const response = await Axios.post("http://localhost:3000/", {
        user: user,
        password: pass,
      });
      return response.status;
    } catch (error) {
      console.log(error, "No se pudo hacer login");
    }
  };

  return (
    <div className="App">
      <label htmlFor="user">Usuario: </label>
      <input
        type="text"
        id="user"
        name="user"
        onChange={(e) => setUser(e.target.value)}
      ></input>
      <label htmlFor="password">Contraseña: </label>
      <input
        type="text"
        id="password"
        name="password"
        onChange={(e) => setPass(e.target.value)}
      ></input>
      <button
        type="button"
        onClick={async () => {
          let codigo = await loguearse();
          console.log(codigo);
          if (codigo === 200) {
            console.log("logueado");
          } else {
            console.log("no pudo hacer login");
          }
        }}
      >
        Enviar
      </button>
    </div>
  );
}

export default App;

Es muy posible que debas habilitar cors en el back, en este ejemplo usé un componente completo con 2 input, sus useState para guardar sus valores y luego pasarlos a la llamada, y cambié la llamada a async y await. El código de la respuesta está en status, no en code. Espero te sirva.

2
  • Muchas gracias ya me funcionó, pero también tuve que agregarle un await a return response, ya tenia habilitado cors en el back. Te podría preguntar como redirigir hacia otro componente una vez el usuaio este autenticado (que el codigo sea 200)?
    – kilex
    Commented el 21 dic. 2021 a las 19:24
  • Me alegra!!, si estás usando react-router, dependiendo de la versión podrías utilizar el hook useHistory en v5 o useNavigate en v6, habría que ver como estás haciendo el routing.. Si la respuesta sirvió para resolver te pido por favor la marques como solución dandole al visto al costado de la pregunta, así otros saben que fue válida. Gracias! Commented el 21 dic. 2021 a las 19:27

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.