在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;

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

56

查看详情

<?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;