React如何读取PHP中设置的session会话数据

1. 编写PHP接口暴露指定session数据 #

session默认存储在服务端，React无法直接读取，需要先写一个专门的PHP接口返回需要的session字段，注意做好权限控制，禁止返回敏感信息。
示例代码：

<?php
// 顶部开启session，必须写在所有输出之前
session_start();
header('Content-Type: application/json');

// 仅返回前端需要的session字段，不要全量返回
$returnData = [
    'code' => 0,
    'data' => [
        'user_id' => $_SESSION['user_id'] ?? null,
        'username' => $_SESSION['username'] ?? null,
        // 其他你需要用到的session字段
    ],
    'msg' => '请求成功'
];

echo json_encode($returnData);
exit;

将文件保存为get_session.php放在站点可访问的目录下即可。

2. React端发起请求获取数据 #

同域名下请求会自动携带PHP生成的PHPSESSID cookie，服务端可以识别到对应用户的session，示例代码：

import { useEffect, useState } from 'react';

function SessionDemo() {
  const [sessionInfo, setSessionInfo] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const getSessionData = async () => {
      try {
        const res = await fetch('/get_session.php', {
          // 配置项保证请求自动携带同域名cookie
          credentials: 'same-origin'
        });
        const result = await res.json();
        if (result.code === 0) {
          setSessionInfo(result.data);
        }
      } catch (err) {
        console.error('获取session失败：', err);
      } finally {
        setIsLoading(false);
      }
    };
    getSessionData();
  }, []);

  if (isLoading) return <div>加载中</div>;

  return (
    <div>
      <p>当前用户ID：{sessionInfo?.user_id ?? '未登录'}</p>
      <p>当前用户名：{sessionInfo?.username ?? '未登录'}</p>
    </div>
  );
}

export default SessionDemo;

• 禁止直接全量返回$_SESSION数组，避免泄露密码、权限等敏感信息
• PHP的session cookie配置httponly不影响该流程，不需要前端手动读取session id
• 如果用axios发起请求，需要配置withCredentials: true才能自动携带cookie

内容的提问来源于stack exchange，提问作者Akampurira Brian David