MERN应用：HTML登录验证成功后跳转React仪表盘求助

1. 在HTML登录页处理成功跳转 #

当后端返回登录成功的响应后，直接通过window.location.href跳转到React仪表盘的URL。示例代码：

document.getElementById('loginForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;

  try {
    const res = await fetch('http://localhost:5000/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password })
    });

    if (res.ok) {
      // 可选：保存后端返回的JWT到localStorage，用于React端验证
      const { token } = await res.json();
      localStorage.setItem('authToken', token);
      // 跳转到React仪表盘（替换为你的实际地址）
      window.location.href = 'http://localhost:3000/dashboard';
    } else {
      const errMsg = await res.json();
      alert(`登录失败：${errMsg.message}`);
    }
  } catch (err) {
    alert('网络错误，请重试');
  }
});

2. 配置React路由确保仪表盘可访问 #

在React项目中使用react-router-dom配置仪表盘路由：

1. 先安装依赖：

npm install react-router-dom

2. 在路由配置文件（比如src/App.js）中添加仪表盘路由：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Dashboard from './components/Dashboard';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        {/* 其他路由可按需添加 */}
      </Routes>
    </Router>
  );
}

export default App;

3. 处理跨域与登录状态验证 #

• 跨域配置：如果HTML登录页、Node后端、React应用运行在不同端口，需在Node后端启用CORS，允许这些域名的请求：

const cors = require('cors');
const express = require('express');
const app = express();

// 允许HTML和React域名的请求，替换为你的实际地址
app.use(cors({ origin: ['http://localhost:8080', 'http://localhost:3000'] }));

• React端验证登录状态：在仪表盘组件中检查是否存在有效登录凭证（比如之前存在localStorage的JWT），未登录则跳回HTML登录页：

import { useEffect } from 'react';

function Dashboard() {
  useEffect(() => {
    const authToken = localStorage.getItem('authToken');
    if (!authToken) {
      // 无有效凭证，跳回登录页
      window.location.href = 'http://localhost:8080/login.html';
    }
    // 可选：用token向后端请求用户信息，渲染个性化内容
  }, []);

  return (
    <div className="dashboard">
      <h1>欢迎来到仪表盘</h1>
      {/* 仪表盘内容 */}
    </div>
  );
}

export default Dashboard;

4. 生产环境注意事项 #

• 部署时需将跳转URL替换为生产环境的实际域名（比如https://yourdomain.com/dashboard）
• 若React应用是构建后部署的，确保静态资源服务正确配置，路由可正常访问
• JWT建议存在HttpOnly Cookie中，提升安全性（需后端配合配置）

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