Redux 状态持久化：如何在页面刷新后保持 Express Cookie 数据

2024-03-20 15:11:34

## ** Redux 状态持久化：如何在页面刷新后保持 Express Cookie 数据

在使用 Express.js 和 React 构建的 Web 应用程序中，管理用户身份验证至关重要。通常，我们会在 Redux 状态中存储身份验证信息，例如 isAuthenticated 和用户数据。然而，在重新加载页面后，这些信息往往会丢失，需要用户重新登录。

潜在原因

这种问题的根源可能是多方面的：

cookie 存储不当： Express cookie 未正确配置，导致浏览器无法正确存储或访问。
页面刷新时的 cookie 访问限制： 某些部署平台（例如 Vercel）可能限制页面刷新时的 cookie 访问。
Redux 状态持久化缺失： Redux 状态未持久化，导致页面刷新后丢失。

解决方案

## 确保正确存储 cookie

验证 cookie 选项（httpOnly, secure) 是否正确设置。
考虑使用 js-cookie 等第三方库来管理 cookie。
确保 cookie 在部署平台上可用（例如在 Vercel 上使用 getInitialProps）。

## 重新加载页面时访问 cookie

使用 JavaScript（例如 document.cookie) 访问 cookie 存储。
探索替代方法，例如使用 localStorage 或 sessionStorage，尤其是当 cookie 访问受限时。

## 持久化 Redux 状态

使用 Redux 持久化库（例如 redux-persist）将身份验证状态存储在持久化存储中。
考虑在组件初始化时从持久化存储中恢复身份验证状态。

实现示例

使用 redux-persist：

import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // defaults to localStorage

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(persistedReducer);
const persistor = persistStore(store);

使用 js-cookie：

import Cookies from 'js-cookie';

const token = Cookies.get('token');
if (token) {
  // Set isAuthenticated to true in Redux
  store.dispatch({
    type: 'LOGIN_USER_SUCCESS',
    payload: {
      isAuthenticated: true,
      user: { /* user data from cookie */ },
    },
  });
}