React项目：如何通过React Router与Express的Passport.js路由交互？

嘿，我刚好做过类似的配置，给你梳理下具体的实现步骤，应该能帮到你！

1. 先明确核心流程 #

整个认证的逻辑链路大概是这样：

• React前端通过按钮点击或路由跳转，触发向Express后端的GitHub认证请求
• Passport接管GitHub OAuth的授权流程，完成后返回用户信息
• 前端拿到认证结果后，更新用户状态并处理路由跳转

2. React端配置（App.js + index.js） #

第一步：配置React Router根组件 #

先确保你已经安装了react-router-dom，然后在index.js里套上路由容器：

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

第二步：在App.js里实现认证交互与路由 #

这里会包含登录触发、状态检查、回调处理的逻辑：

// App.js
import { Routes, Route, Link, useNavigate } from 'react-router-dom';
import { useEffect, useState } from 'react';

function App() {
  const [user, setUser] = useState(null);
  const navigate = useNavigate();

  // 页面刷新时自动检查用户认证状态
  useEffect(() => {
    fetch('/api/auth/user')
      .then(res => res.json())
      .then(data => {
        if (data.user) {
          setUser(data.user);
          navigate('/dashboard');
        }
      })
      .catch(err => console.error('检查用户状态失败:', err));
  }, [navigate]);

  // 触发GitHub登录：直接跳转到Express的认证路由，Passport会处理后续流程
  const handleLogin = () => {
    window.location.href = '/api/auth/github';
  };

  // 登出请求
  const handleLogout = () => {
    fetch('/api/auth/logout', { method: 'POST' })
      .then(() => {
        setUser(null);
        navigate('/');
      })
      .catch(err => console.error('登出失败:', err));
  };

  return (
    <div className="App">
      <nav>
        {user ? (
          <>
            <span>欢迎回来, {user.username}</span>
            <button onClick={handleLogout} style={{marginLeft: '10px'}}>登出</button>
          </>
        ) : (
          <button onClick={handleLogin}>用GitHub登录</button>
        )}
        <Link to="/" style={{marginLeft: '15px'}}>首页</Link>
        {user && <Link to="/dashboard" style={{marginLeft: '15px'}}>控制台</Link>}
      </nav>

      <Routes>
        <Route path="/" element={<h1>欢迎来到首页</h1>} />
        <Route 
          path="/dashboard" 
          element={user ? <h1>你的专属控制台</h1> : <h1>请先登录访问</h1>} 
        />
        {/* GitHub认证回调后的过渡路由：处理状态更新与跳转 */}
        <Route 
          path="/auth/github/callback" 
          element={
            <div>
              <p>正在处理登录，请稍候...</p>
              {(() => {
                useEffect(() => {
                  fetch('/api/auth/user')
                    .then(res => res.json())
                    .then(data => {
                      if (data.user) {
                        setUser(data.user);
                        navigate('/dashboard');
                      }
                    });
                }, [navigate]);
              })()}
            </div>
          } 
        />
      </Routes>
    </div>
  );
}

export default App;

3. 关键注意事项（必看） #

• 跨域配置：如果React和Express跑在不同端口（比如React在3000，Express在5000），一定要在Express里配置CORS并允许携带凭证：

// Express后端的CORS配置
const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:3000', // 替换成你的React地址
  credentials: true
}));

• Passport回调路由对齐：确保Express的回调路由和GitHub开发者平台里配置的完全一致，示例如下：

// Express后端的认证路由
app.get('/api/auth/github', passport.authenticate('github'));

app.get('/api/auth/github/callback', 
  passport.authenticate('github', { failureRedirect: 'http://localhost:3000/' }),
  (req, res) => {
    // 认证成功后跳回React的回调路由
    res.redirect('http://localhost:3000/auth/github/callback');
  }
);

// 获取当前用户信息的接口
app.get('/api/auth/user', (req, res) => {
  res.json({ user: req.user });
});

// 登出接口
app.post('/api/auth/logout', (req, res) => {
  req.logout(err => {
    if (err) return next(err);
    res.sendStatus(200);
  });
});

• 会话中间件配置：Express必须配置express-session，Passport才能保存用户的认证状态：

const session = require('express-session');
app.use(session({
  secret: 'your-custom-secret-key', // 换成你自己的安全密钥
  resave: false,
  saveUninitialized: false,
  cookie: { secure: process.env.NODE_ENV === 'production' } // 生产环境要开启secure
}));
app.use(passport.initialize());
app.use(passport.session());

这样整个流程就跑通了：用户点击登录按钮跳转到Express的认证路由，GitHub授权后回调到Express，Express再跳回React的回调路由，前端更新用户状态后跳转到控制台。

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