React中如何通过Axios获取express-session中的userId？

你之所以没法通过前端代码拿到session里的userId，核心原因是session对应的Cookie设置了httpOnly: true——这是express-session的默认安全配置，目的是防止XSS攻击，前端JS（包括document.cookie、js-cookie这类工具）都无法读取httpOnly类型的Cookie内容。

下面给你两种可行的解决方案：

方案1：登录成功后直接存储接口返回的userId #

你的登录接口已经主动返回了userId，完全可以把这个值存在前端，不用再去碰session Cookie：

修改前端登录代码，把返回的userId存入前端存储：

export const loginUser = async (email, password) => {
    const user = await FETCH_DATA.post('/login', {email, password});
    console.log(user.status);
    // 用sessionStorage存储，关闭浏览器就失效，和session的特性匹配
    sessionStorage.setItem('userId', user.data.userId);
    // 如果需要持久化登录（关闭浏览器再打开仍保持登录），可以改用localStorage
    // localStorage.setItem('userId', user.data.userId);
    return user;
}

之后判断登录状态、获取userId直接读存储即可：

// 检查是否已登录
const isLoggedIn = () => {
    return sessionStorage.getItem('userId') !== null;
}

// 获取当前用户ID
const getCurrentUserId = () => {
    return sessionStorage.getItem('userId');
}

方案2：后端新增验证接口，主动校验并获取用户状态 #

如果需要确认session是否真的有效（比如session过期了，但前端存储的userId还存在），可以在后端加一个校验接口：

后端新增接口 #

// 在你的express路由中添加
app.get('/api/check-auth', (req, res) => {
    // 检查session中是否存在userId
    if (req.session.userId) {
        return res.status(200).send({ 
            userId: req.session.userId, 
            isAuthenticated: true 
        });
    } else {
        return res.status(401).send({ isAuthenticated: false });
    }
});

前端调用接口校验状态 #

export const checkAuthStatus = async () => {
    try {
        const response = await FETCH_DATA.get('/check-auth');
        // 更新前端存储的userId
        sessionStorage.setItem('userId', response.data.userId);
        return response.data;
    } catch (error) {
        // 未登录或session过期，清除前端存储的无效数据
        sessionStorage.removeItem('userId');
        return { isAuthenticated: false };
    }
}

关键注意事项 #

• 绝对不要为了让前端读取Cookie就把httpOnly改成false，这会直接暴露session被XSS攻击窃取的风险，违背安全设计初衷。
• sessionStorage是标签页独立的，适合单会话场景；localStorage是浏览器全局的，适合持久化登录需求，根据你的业务场景选择。
• 如果是大型React应用，建议用Context或Redux来全局管理登录状态和userId，避免在多个组件里重复读取存储。

内容的提问来源于stack exchange，提问作者daniel sas