He estado tratando de conservar mi token en localStorage, pero cada vez que consulto la página, el valor se vuelve indefinido.
Aquí está mi código de App.tsx . Estoy usando redux en mi proyecto, pero persistir en usar redux arroja muchos errores de tipo. Es por eso que voy con el almacenamiento local.
const [isLoggedIn, setIsLoggedIn] = useState(''); // @ts-ignore const user = useAppSelector(state=>state.user.currentUser.token); useEffect(()=>{ const getToken = localStorage.getItem("token"); if(getToken){ setIsLoggedIn(getToken) } },[]) useEffect(()=>{ localStorage.setItem("token", user) },[user])Para referencia adicional, estas son mis rutas.
<Route path="/userProfile" element={<UserProfile />} /> <Route path="/login" element={user ? <Navigate to="/" /> : <Login />} /> <Route path="/cart" element={<Cart />} /> <Route path="/" element={<Home />} /> <Route path="/product/:id" element={<SingleProduct />} />Hasta ahora he intentado todo lo que sé, pero todavía no puedo descubrir la raíz del problema.
useEffect(()=>{ localStorage.setItem("token", user) },[user]) Su problema es del useEffect anterior. Aunque tiene dependencia de user (que está escuchando los cambios de estado del user ), se llama cuando representa el componente por primera vez.
Le propondría que agregue una condición a ese useEffect de uso como a continuación
useEffect(()=>{ if(user) { localStorage.setItem("token", user) } },[user]) Eso lo ayudaría a evitar llamar a setItem con un valor indefinido de user .
Verificar usuario a indefinido
user && localStorage.setItem("token", user)