在React应用中安全有效地获取PHP会话数据

<?php
session_start(); // 启动或恢复会话

// 设置响应头，告知客户端返回的是JSON
header('Content-Type: application/json');

// 为了演示，我们直接暴露所有会话数据。
// 在生产环境中，强烈建议根据需求过滤或仅暴露特定的非敏感会话数据。
// 例如：
// $responseData = [
//     'userId' => $_SESSION['user_id'] ?? null,
//     'username' => $_SESSION['username'] ?? null
// ];
// echo json_encode($responseData);

echo json_encode($_SESSION); // 将$_SESSION数组编码为JSON字符串并输出
?>

import React, { useEffect, useState } from 'react';

function SessionDataReader() {
  const [sessionData, setSessionData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchSessionData = async () => {
      try {
        // 请求session.php，credentials: "same-origin" 是关键。
        // 它确保在同源请求中发送浏览器存储的Cookie，PHP会利用这些Cookie识别会话。
        const response = await fetch('session.php', {
          method: 'GET', // 通常获取数据使用GET方法
          credentials: 'same-origin' // 关键：确保发送Cookie
        });

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json(); // 解析JSON响应
        setSessionData(data);
      } catch (e) {
        console.error("Error fetching session data:", e);
        setError(e.message);
      }
    };

    fetchSessionData();
  }, []); // 空依赖数组表示只在组件挂载时运行一次

  if (error) {
    return <div>Error: {error}</div>;
  }

  if (!sessionData) {
    return <div>Loading session data...</div>;
  }

  return (
    <div>
      <h2>PHP Session Data:</h2>
      <pre>{JSON.stringify(sessionData, null, 2)}</pre>
    </div>
  );
}

export default SessionDataReader;

<?php
// ... 其他PHP逻辑 ...
// 设置一个客户端可读的Cookie，有效期1小时，路径为根目录
setcookie("my_custom_data", "some_value", [
    'expires' => time() + 3600,
    'path' => '/',
    'secure' => true, // 建议在生产环境中使用HTTPS时设置为true
    'httponly' => false, // 关键：设置为false允许JavaScript访问
    'samesite' => 'Lax' // 建议设置SameSite属性
]);
?>

// 在React组件中，可以通过document.cookie直接读取
import React, { useEffect, useState } from 'react';

function CookieDataReader() {
  const [customData, setCustomData] = useState(null);

  useEffect(() => {
    const cookies = document.cookie.split(';').map(cookie => cookie.trim());
    const myCustomDataCookie = cookies.find(cookie => cookie.startsWith('my_custom_data='));
    if (myCustomDataCookie) {
      const value = myCustomDataCookie.split('=')[1];
      setCustomData(decodeURIComponent(value)); // 解码URL编码的Cookie值
    }
  }, []);

  return (
    <div>
      <h2>Custom Data from Cookie:</h2>
      {customData ? <p>{customData}</p> : <p>No custom data found in cookie.</p>}
    </div>
  );
}

export default CookieDataReader;