Soy nuevo en reaccionar y estoy tratando de crear una función de inicio de sesión básica usando tokens y almacenamiento local.
Puedo ver en mis devtools que un token está realmente almacenado, pero cuando actualizo la página, mi aplicación parece tener problemas para recuperarlo.
Estos son los dos archivos js en los que creo que se encuentra el problema:
function Mypage () { const { token, setToken } = useToken(); if(!token) { return <Login setToken={setToken} /> } return ( <> <h1>My page</h1> </> ) } export default Mypage export default function useToken() { const getToken = () => { const tokenString = localStorage.getItem('token'); const userToken = JSON.parse(tokenString); return userToken?.token }; /* const getToken = () => { const token = localStorage.getItem("token"); return token !== null; }; */ const [token, setToken] = useState(); const saveToken = userToken => { localStorage.setItem('token', JSON.stringify(userToken)); setToken(userToken.token); }; return { setToken: saveToken, token } }Traté de jugar con dos constantes diferentes en las que el comentario funcionaba en "Mi página", pero me gustaría que se reuniera en la misma función "useToken".
¿Alguien puede dar alguna información sobre dónde podría estar metiendo la pata?
Lo que puedo ver en su código es que hay una función para getToken que devuelve el token pero no obtiene el token. A cambio, llama a la función getToken como configuraste saveToken .
return { setToken: saveToken, token: getToken }