使用passport-local的MERN项目中如何持久化Redux中的认证状态？

最优实现方案 #

你当前使用的是httpOnly属性的Session Cookie认证，前端不需要主动存储任何认证信息，核心逻辑是每次应用初始化时主动向后端校验当前会话有效性、拉取用户信息更新Redux状态，这是该场景下最安全也最合理的方案，具体实现步骤如下：

1 后端新增当前用户查询接口 #

新增一个接口用于校验会话状态、返回当前登录用户信息，不需要前端传任何参数，cookie会自动随请求携带：

export const getCurrentUser: RequestHandler = (req, res) => {
  // passport自带的方法，校验当前会话是否已认证
  if (req.isAuthenticated()) {
    const user: IUser = req.user as IUser;
    const userResponse: IUserResponse = {
      id: user.id.toString(),
      username: user.username,
      active: user.active,
      deleted: user.deleted,
      role: user.role,
    };
    return res.status(200).json({ user: userResponse });
  }
  return res.status(401).json({ message: "未登录" });
};

给接口绑定路由，比如GET /api/auth/me，同时需要调整后端CORS配置：

const cors = require('cors');
app.use(cors({
  origin: "http://localhost:3000", // 必须填前端的实际地址，不能用*
  credentials: true // 允许跨域请求携带cookie
}));

2 前端axios全局配置 #

必须开启withCredentials，否则请求不会自动携带connect.sid这个cookie：

// 全局配置
axios.defaults.withCredentials = true;

// 如果是自定义axios实例的写法
const api = axios.create({
  baseURL: "http://localhost:8080/api",
  withCredentials: true
});

3 Redux添加初始化认证逻辑 #

首先在auth相关的slice里添加拉取当前用户的异步thunk：

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

export const fetchCurrentUser = createAsyncThunk(
  'auth/fetchCurrentUser',
  async (_, { rejectWithValue }) => {
    try {
      const res = await api.get('/auth/me');
      return res.data.user;
    } catch (err) {
      return rejectWithValue(err.response.data);
    }
  }
);

修改slice的初始状态和响应逻辑：

const authSlice = createSlice({
  name: 'auth',
  initialState: {
    user: null,
    isAuthenticated: false,
    loading: true // 新增加载状态，避免初始化时路由跳转错误
  },
  reducers: {
    // 原有登录、退出登录逻辑保留
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchCurrentUser.pending, (state) => {
        state.loading = true;
      })
      .addCase(fetchCurrentUser.fulfilled, (state, action) => {
        state.user = action.payload;
        state.isAuthenticated = true;
        state.loading = false;
      })
      .addCase(fetchCurrentUser.rejected, (state) => {
        state.user = null;
        state.isAuthenticated = false;
        state.loading = false;
      });
  }
});

在应用根组件（比如App.jsx）触发初始化请求：

import { useDispatch, useSelector } from 'react-redux';
import { fetchCurrentUser } from './store/authSlice';

function App() {
  const dispatch = useDispatch();
  const { loading } = useSelector(state => state.auth);

  useEffect(() => {
    // 应用启动时自动校验登录状态
    dispatch(fetchCurrentUser());
  }, [dispatch]);

  // 加载状态结束前显示占位，避免未认证用户闪到受保护页面
  if (loading) return <div>加载中...</div>;

  return (
    <BrowserRouter>
      {/* 原有路由配置，受保护路由直接判断isAuthenticated即可 */}
    </BrowserRouter>
  );
}

可选优化点 #

• 生产环境不要用express-session默认的内存存储session，会出现服务重启session丢失、多实例部署会话不同步的问题，改用connect-mongo存在数据库中：

const session = require('express-session');
const MongoStore = require('connect-mongo');

app.use(session({
  secret: "你的session加密密钥",
  resave: false,
  saveUninitialized: false,
  store: MongoStore.create({ mongoUrl: "你的MongoDB连接地址" }),
  cookie: {
    httpOnly: true,
    maxAge: 7 * 24 * 60 * 60 * 1000 // 按需设置session有效期，比如7天
  }
}));

• 退出登录逻辑：后端新增logout接口调用req.logout()清除服务端session，前端调用接口后重置Redux的auth状态即可。

不推荐用localStorage存储用户信息：本地存储的信息无法和后端session状态同步，会出现后端session已过期、但前端本地还存着登录信息的假登录问题，每次初始化主动请求后端校验是最准确的方案，同时httpOnly cookie的方案也能有效避免XSS攻击盗取认证信息，安全性远高于将用户信息或令牌存在localStorage。

内容的提问来源于stack exchange，提问作者Anish Sinha