Estoy creando un formulario de registro de inicio de sesión simple con la funcionalidad de recordarme en react js
junto con redux
, thunk
y redux-persist
persist . Cuando envío los datos de inicio de sesión correctos, es decir, el correo electrónico y la contraseña, la API devuelve un token de acceso que no cambia (permanente).
Funcionalidad esperada: si está marcada la casilla Recuérdame, el token de acceso siempre debe guardarse para que cada vez que vuelva a visitar la página después de cerrar el navegador o cuando actualice la página, deba iniciar sesión automáticamente en la página de inicio.
si recordarme no está marcado, el token de acceso se almacena solo hasta que no salgo de la página o no cierro el navegador, una vez que se cierra el navegador, el token de acceso se elimina automáticamente
mi enfoque es:
si el botón Recuérdame está marcado, quiero conservar el token de acceso (recibido de API) en el almacenamiento local
y si el botón Recuérdame no está marcado, quiero almacenar el token de acceso en el almacenamiento de la sesión
alguien puede ayudarme a implementar esto o corregir mi enfoque si es incorrecto.
https://github.com/guneethind/login-signup
Iniciar sesión.js
> const Login = () => { > const dispatch = useDispatch(); > const navigate = useNavigate(); > > const data = useSelector((state) => state.login); > > const onFinish = (values) => { > dispatch(setLoginValues(values)); > }; > > useEffect(() => { > if (data?.loginSuccess?.access_token) { > message.success("Logged in"); > navigate("/home"); > } else if (data?.loginFailed?.status === 401) { > message.error(`${data.loginFailed.message}`); > navigate("/login"); > dispatch(setLoginEmpty()); > } > }, [data]);
tienda.js
import storage from "redux-persist/lib/storage"; const persistConsif = { key: "root", storage: storage, }; const persistedReducer = persistReducer(persistConsif, reducers); export const store = createStore( persistedReducer, composeWithDevTools(applyMiddleware(thunk)) ); export const persistor = persistStore(store);
índice.js
ReactDOM.render( <Provider store={store}> <PersistGate loading={null} persistor={persistor}> <App /> </PersistGate> </Provider>, document.getElementById("root") );
Finalmente resolví el problema, usé cookies para cuando recordarme está desmarcado y almacenamiento local para cuando recordarme está marcado
aquí está el código para el mismo https://github.com/guneethind/login-signup/tree/cookies-implementaion