0

Cuando hago login de usuario en mi componente Login, con un servicio le envio el email y password a node/express, y si los datos son correctos, me devuelve el token y el email del usuario. Desde React tomo el token y email, el email lo guardo en la localStorage, y redirijo a la pagina Home. pero, como mi pagina Home esta protegida, antes de redirigir pregunto en el archivo protected, si la localStorage existe. Si existe retorna a home, caso contrario redirige a login. Pero me informa que no existe la localStorage.

Aca el resultado:

introducir la descripción de la imagen aquí

aca login:

const onSubmit = async (data, e) => {
    e.preventDefault();
    let authService = new AuthService();
    // se activa el spinner/loader
    setLoading(true);
    const result = authService.login(data);
    result.then((res) => {
      setLoading(false);
      console.log('email: ' + res.email);
      console.log('token: ' + res.token);
      localStorage.setItem("user", res.email);
      window.location.reload(history.push("/home"));
    });
  };

aca el servicio

import axios from "axios";

class AuthService {
  async login(user) {
    try {
      let res = await axios.post("http://localhost:4000/api/auth/login", user);
      const data = res.data;
      return data;
    } catch (e) {
      alert("Error login de usuario");
    }
  }
}
export default AuthService;

aca App.js con el ruteo protejido

import Protected from "./components/auth/Protected"

import { BrowserRouter as Router, Route } from "react-router-dom";


function App() {

  return (
    <Router>
      <Header />
      <div className="box">
        <Route exact path="/">
          <Protected Cmp={Home} />
        </Route>
        <Route exact path="/home">
          <Protected Cmp={Home} />
        </Route> 
        
        <Route path="/createOperation">
          <Protected Cmp={CreateOperation} />
        </Route>
        
        <Route path="/login" component={Login}></Route>
      
      </div>
      <Footer />
    </Router>
   
  );
}

export default App;

aca el archivo protected (el que comprueba si la localStorage existe)

import React, {useEffect} from "react";
import { useHistory } from "react-router-dom"

function Protected(props){
    let Cmp = props.Cmp;
    const history = useHistory();

    useEffect(() => {
        if(!localStorage.getItem("user")){
            alert('no existe localStorage user')
            history.push("/login")
        }
    }, [])

    return(
        <div>
           <Cmp />
        </div>    
    );
}

export default Protected;

Si funciona, si no utilizo el servicio en el Login y hago todo directamente asi:

const onSubmit = async (data, e) => {
    e.preventDefault();
    // se activa el spinner/loader
    setLoading(true);
    try {
      const result = await axios
        .post("http://localhost:4000/api/auth/login", data)
        .then((res) => {
          const email = data.email; // value del input email
          const token = res.data.token;
          alert('TOKEN: ' + token);
          localStorage.setItem("user", email);
          window.location.reload(history.push("/home"));
        });
    } catch (e) {
      setLoading(false);
      alert("Error login de usuario");
    }
  };

1
  • ¿Puedes probar haciendo la redirección en Protected con un render condicional (en vez de usar un hook)? Algo cómo return( <div> { localStorage.getItem("user") ? <Cmp />:<Redirect to="login"/>}</div> ); Tendrías que importar Redirect de react-router
    – FranAcuna
    Commented el 4 jun. 2021 a las 22:34

2 respuestas 2

1

Si te das cuenta cuando te funciona sin el servicio le pones await para invocar al servicio, sin embargo, cuando llamas al login que es async no le haces await, por lo tanto, hay una desincronización. Utiliza result = await login(). Al retornar result recibirá la data por lo que no es necesario hacer el result.then(). El await en este caso esta haciendo la función del .then.

-1

localStorage devuelve una promesa,
si queres validar si existe user deberías hacer algo asi:

localStorage.getItem(user)
.then(user => {
   if(!user) {
    // do something
   }
})

o usando async await, queda a tu gusto.

localStorage existe en los browsers independientemente del framework/lib que uses.

9
  • gracias por responder, en el archivo "protected" hice esto : localStorage.getItem("user").then((user) => { if (!user) { history.push("/login") } });
    – Claudio
    Commented el 3 jun. 2021 a las 19:33
  • Pero sale este error: CANNOT READ PROPERTY THEN OF NULL
    – Claudio
    Commented el 3 jun. 2021 a las 19:35
  • No conozco mucho el reactjs pero al menos puedo seguir la lógica. si te das cuenta cuando te funciona sin el servicio le pones await, sin embargo, cuando, llamas al login que es async no le haces await. Para mí es falta de sincronización. ¿no se puede setear el localstoragen en el servicio? El error es el mismo no existe user. Commented el 4 jun. 2021 a las 4:04
  • Me confundi con AsyncStorage de React Native... lo que estas haciendo está perfecto @Claudio , en el caso de que user no existe debería retornar null, podes probar haciendo: ` if (localStorage.getItem("user") === null) { //...do something } ` Commented el 4 jun. 2021 a las 20:20
  • 1
    Es que no utilices el .then puesto que al retornar await login() result ya tiene la data que recibió y no necesitas hacer un .then. El await en este caso esta haciendo la función del .then. Commented el 5 jun. 2021 a las 17:58

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.