如何让React页面仅允许经PHP登录认证的用户访问？

方案一：通过PHP代理React资源（同域场景推荐） #

这个方案让所有React页面的请求先经过PHP的认证检查，从根源上阻止未登录用户直接访问。

1. 完善PHP认证的Session处理
   在Auth.php开头添加Session初始化，认证成功后标记登录状态：

session_start();
if (isset($_POST['user']) && isset($_POST['password'])) {
    // 执行认证逻辑（验证用户名密码）
    $is_valid = true; // 替换为实际的认证结果
    if ($is_valid) {
        $_SESSION['logged_in'] = true;
        // 跳转至PHP代理的React入口
        header("Location: /serve-react.php");
        exit;
    } else {
        // 认证失败，返回登录页或提示错误
        header("Location: /Login.php");
        exit;
    }
}

同时在Login.php开头也要添加session_start();，确保Session上下文一致。

2. 创建React资源代理文件
   新建serve-react.php，负责检查登录状态并转发React静态资源：

session_start();
// 检查是否已登录
if (!isset($_SESSION['logged_in']) || $_SESSION['logged_in'] !== true) {
    header('Location: /Login.php');
    exit;
}

// 处理React静态资源请求（js、css、图片等）
$request_uri = $_SERVER['REQUEST_URI'];
$react_build_dir = __DIR__ . '/react-build'; // React打包后的文件夹路径

// 匹配静态资源后缀
if (preg_match('/\.(js|css|png|jpg|jpeg|gif|ico|svg)$/', $request_uri)) {
    $file_path = $react_build_dir . $request_uri;
    if (file_exists($file_path)) {
        // 设置正确的MIME类型
        $mime_type = mime_content_type($file_path);
        header("Content-Type: $mime_type");
        readfile($file_path);
        exit;
    } else {
        header("HTTP/1.0 404 Not Found");
        exit;
    }
}

// 处理React路由的所有请求，返回index.html（单页应用路由需要）
readfile($react_build_dir . '/index.html');
exit;

3. 配置服务器路由转发
   让所有React相关的请求都指向serve-react.php：

• Apache：在项目根目录创建.htaccess文件

RewriteEngine On
RewriteBase /
# 根路径指向代理文件
RewriteRule ^$ serve-react.php [L]
# 非文件/目录的请求都转发到代理文件
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ serve-react.php [L]

• Nginx：在server块中添加location配置

location / {
    try_files $uri $uri/ /serve-react.php?$query_string;
}

方案二：React前端主动验证登录状态（适合前后端分离场景） #

如果React和PHP部署在不同域名，或需要保留前端独立部署的灵活性，可以让React在加载时主动请求PHP的认证接口。

1. PHP端添加认证检查接口
   新建check-auth.php，用于返回用户登录状态：

session_start();
header('Content-Type: application/json');
// 允许跨域（如果React和PHP不同域）
header("Access-Control-Allow-Origin: http://your-react-domain.com");
header("Access-Control-Allow-Credentials: true");

if (isset($_SESSION['logged_in']) && $_SESSION['logged_in'] === true) {
    echo json_encode(['authenticated' => true]);
} else {
    echo json_encode(['authenticated' => false]);
    http_response_code(401);
}

2. React前端添加登录校验逻辑
   在React的根组件（如App.js）中，组件挂载时请求认证接口，未登录则跳转至PHP登录页：

import { useEffect, useState } from 'react';
import { Navigate, Outlet } from 'react-router-dom';

function ProtectedRoute() {
  const [isAuthenticated, setIsAuthenticated] = useState(null);

  useEffect(() => {
    // 请求PHP认证接口，携带Cookie（同域或配置了Allow-Credentials）
    fetch('http://your-php-domain.com/check-auth.php', {
      credentials: 'include'
    })
      .then(res => res.json())
      .then(data => setIsAuthenticated(data.authenticated))
      .catch(() => setIsAuthenticated(false));
  }, []);

  if (isAuthenticated === null) {
    return <div>验证登录状态中...</div>;
  }

  return isAuthenticated ? <Outlet /> : <Navigate to="http://your-php-domain.com/Login.php" replace />;
}

// 在路由中使用ProtectedRoute包裹需要授权的页面
// 示例：
// <Routes>
//   <Route element={<ProtectedRoute />}>
//     <Route path="/" element={<YourMainPage />} />
//     {/* 其他需要授权的路由 */}
//   </Route>
// </Routes>

关键安全注意事项 #

• 配置Session安全参数：在php.ini中设置

  session.cookie_httponly = true    # 防止XSS窃取Session
  session.cookie_secure = true      # 仅在HTTPS下传输Cookie（如果使用HTTPS）
  session.cookie_samesite = Strict  # 防止CSRF攻击
  session.gc_maxlifetime = 1800     # Session超时时间（30分钟，按需调整）
  

• 认证逻辑中要使用安全的密码验证方式（如password_verify()），避免明文存储密码。
• 如果使用方案二，确保CORS配置仅信任你的React域名，避免恶意网站调用认证接口。

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