Estoy usando una variable de estado de contexto para almacenar el valor de mi token cuando el usuario inicia sesión. Y uso ese token en toda mi aplicación. Cuando inicio sesión, el token se registra en la consola en la página de inicio de sesión. Pero da un valor vacío en otras páginas aunque estoy usando el contexto en todos los archivos.
AuthContext.js
export const AuthContext = createContext(); export const AuthProvider = (props) => { const [authToken, setAuthToken] = useState(""); const [authProtected, setAuthprotected] = useState(true); return ( <AuthContext.Provider value={{ token: [authToken, setAuthToken], authProtect: [authProtected, setAuthprotected], }} > {props.children} </AuthContext.Provider> ); };Iniciar sesión.js
const userAuth = (e) => { e.preventDefault(); Axios.post(authApi, loginInfo).then((res) => { setJwtToken(res.data.idToken.jwtToken); }); }; console.log(jwtToken);Después de iniciar sesión, uso esto en una de mis páginas y registra un valor vacío
const { token } = useContext(AuthContext); const [jwtToken, setJwtToken] = token; console.log(jwtToken);Cuando la página se recarga, se vuelve a crear el contexto. Debe usar un useEffect dentro del contexto para recuperar la información del backend y guardar el token en caso de que esté guardando en alguna cookie o almacenamiento local.
Coloque el token en la cookie y cuando cambie de página, recupere la cookie mediante useEffect para guardar nuevamente en contexto
Nota: cuando cambia de página, todo en el contexto se vuelve a crear, por lo que cuando la página va a obtener algo del contexto, estará vacía