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") );