0
124
Vistas¿Cómo puedo usar el almacenamiento local con la funcionalidad de inicio de sesión en reaccionar?
Estoy tratando de crear una funcionalidad de inicio de sesión en la que, si el usuario ha iniciado sesión, debe ser redirigido a la página de salud, pero si no ha iniciado sesión, el usuario debe ser redirigido automáticamente a la página de inicio de sesión. Mientras hacía esto, me encontré con el concepto de almacenamiento local, lo entendí e intenté implementarlo. Sin embargo, no está obteniendo los resultados deseados.
1 Respuestas
Responde la pregunta0
Por lo que puedo decir, te falta inicializar tu estado isLog desde localStorage. Después de que un usuario se autentique, configura el almacenamiento y lo redirige a la ruta "/salud", pero si un usuario ya inició sesión y vuelve a cargar la página, la App reinicializará su estado isLog de nuevo a false .
Usando una función de inicializador perezoso de estado , puede leer el almacenamiento local para la clave isLog y establecer el estado inicial.
const [isLog, setState] = useState(() => { return !!JSON.parse(localStorage.getItem("isLog")); }); 
También puede simplificar su lógica de redirección moviéndola debajo de todas sus rutas, excepto el "404" que coincide con todas las rutas.
Ejemplo:
<Switch> <Route path="/login"> <Login isLogIn={handleLogin} /> </Route> <Route path="/health" component={Health} /> <Route path="/useradmin" component={UserAdmin} /> <Redirect exact from="/" to={isLog ? "/health" : "/login"} /> <Route path="*">NOT FOUND</Route> </Switch>