如何在react js中实现remember me功能

Question

我正在制作一个简单的登录注册表单，请记住我在react js以及redux,thunk和redux-persist中的功能。当我发送正确的登录详细信息，即电子邮件和密码，api返回一个不变的(永久的)access_token。

预期功能:-如果记住我勾选了访问令牌应该始终保存，以便当我重新访问页面后关闭浏览器或当我刷新页面时，我应该自动登录到主页

如果未勾选"记住我"则访问令牌仅存储到我不退出页面或不关闭浏览器时，一旦浏览器关闭，access_token将自动删除

我的方法是:

如果- remember me按钮被选中，那么我想在本地存储中持久化访问令牌(从api接收)

如果-记住我的按钮没有被选中那么我想将访问令牌存储在会话存储

有人可以帮助我实现这个或纠正我的方法，如果它是错误的。

https://github.com/guneethind/login-signup

Login.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]);

store.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);

index.js

ReactDOM.render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>,
document.getElementById("root")
);

Answer 1

终于解决了这个问题，当"记得我"没有勾选时，我用饼干记住，本地存储被选中

下面是相同的代码https://github.com/guneethind/login-signup/tree/cookies-implementaion