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:
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");
}
};
return( <div> { localStorage.getItem("user") ? <Cmp />:<Redirect to="login"/>}</div> );
Tendrías que importarRedirect
dereact-router