如何在 React JS 中实现记住我的功能

Question

我正在制作一个简单的登录注册表单，在 react js 以及 redux、thunk 和 redux-persist 中具有记住我的功能。当我发送正确的登录详细信息，即电子邮件和密码时，api returns 一个不变的（永久的）access_token.

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

如果没有勾选记住我，访问令牌只会在我不退出页面或不关闭浏览器之前存储，一旦浏览器关闭，access_token 将自动删除

我的做法是：

如果 - 记住我按钮被选中，那么我想在本地存储中保留访问令牌（从 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

问题终于解决了，当未勾选记住我时，我使用 cookie 并勾选记住我时的本地存储

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

如何在 React JS 中实现记住我的功能

How to implement remember me functionality in react js

javascript

reactjs

redux-thunk

react-redux

redux-persist