关于Auth系统和工作流程

Question

就像我制作任何身份验证系统时一样，用户注册然后登录，然后生成一个cookie，现在希望将用户状态存储在应用程序中，我使用redux，并且在刷新状态时应该在那里我使用redux持久，在那之前没问题，但是就像 cookie 是 1d （其过期）一样，但 redux 持久存储是永久存储的， 另外，我从未在任何生产级别的应用程序中看到数据存储在 persist 中，那么它们如何处理 persist 的事物和 cookie experies 的过期时间，因此用户应该看到登录，但它通过 persist 看到一些数据

那么身份验证系统是如何工作的（告诉我最好的解决方案）

我使用了 persist，cookie 过期了，所以它应该显示登录信息，但它显示了所有功能，因为前端从 persist 检查用户数据 这是我的前端身份验证的示例代码

import { useSelector } from "react-redux";
import { Outlet, Navigate } from "react-router-dom";

const ProtectedRoutes = () => {
  const user = useSelector((state) => state.user.user);

  return user ? <Outlet /> : <Navigate to="/" />;
};

export default ProtectedRoutes;

从 redux 中获取用户持久化

Answer 1

在用户界面中的某个位置，您应该在应用程序安装/渲染时检查 cookie/令牌/等，并更新适当的状态以指示 cookie/令牌/等已过期并强制用户进入您的登录流程。如果/当

ProtectedRoutes

为 false 时，您的

state.user.user

已经处理了重定向部分，因此您只需要在过期时处理使

state.user.user

状态无效即可。

实施示例：

const dispatch = useDispatch();
const cookie = useSelector(state => state.user.cookie);

useEffect(() => {
  if (isCookieExpired(cookie)) {
    dispatch(logout());
  }
}, [dispatch, cookie]);

您的“注销”操作应清除所有用户和 cookie 状态，并且当应用程序重新呈现时，

ProtectedRoutes

组件应将用户弹回您的身份验证流程，并且 Redux-Persist 应保留更新后的状态。

这取决于您希望在应用程序中的哪个位置应用此逻辑，但我建议的两个位置要么是根应用程序组件附近的某个位置，要么是您的 ProtectedRoutes 组件中，因此每次受保护时都会检查 cookie路线已访问。