如何在Google OAuth2.0回调中同时实现重定向与响应数据返回？

我用Passport.js实现了本地（邮箱+密码）和Google OAuth2两种认证策略：

router.post('/login', authenticateRequest, authController.login);

router.get('/google', passport.authenticate('google', { 
    scope: ['profile', 'email'] })
);

router.get('/google/callback', passport.authenticate('google', { 
    failureRedirect: '/', session: false,}),
  authController.login
);

本地登录和Google认证回调都会调用authController.login返回统一格式的响应：

const login = (req: Request, res: Response) => {
  const accessToken = req.user.generateJWT(); // req.user由passport设置
  const refreshToken = req.user.generateRefreshToken();
  const userInfo = req.user.toJSON();
  res.json({ accessToken, refreshToken, userInfo });
};

本地登录正常，但Google回调时浏览器停在后端回调URL，无法回到前端应用，导致前端无法获取返回的token和用户信息。我试过先返回JSON再重定向（因响应头已设置失败），也试过用URL参数传递数据（不符合安全规范），希望在不重构前端现有代码的前提下解决问题。

Google Strategy配置如下：

import passport from 'passport';
import { Strategy as GoogleStrategy } from 'passport-google-oauth20';
import User from '../models/User';

const googleLogin = new GoogleStrategy(
  {
    clientID: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    callbackURL: `${process.env.SERVER_URL_DEV}${process.env.GOOGLE_CALLBACK_URL}`,
    proxy: true,
  },
  async (accessToken, refreshToken, profile, done) => {
    try {
      // 尝试通过googleId查找用户
      const user = await User.findOne({ googleId: profile.id });
      if (user) {
        return done(null, user);
      }
    } catch (err) {
      console.log(err);
    }
    // 未找到用户则创建新用户并返回
    try {
      const newUser = await new User({
        provider: 'google',
        googleId: profile.id,
        username: `user${profile.id}`, // 将googleId保存为用户名：user1234567890
        email: profile.emails[0].value,
        name: profile.displayName,
      }).save();
      done(null, newUser);
    } catch (err) {
      console.log(err);
    }
  },
);

passport.use(googleLogin);

方案1：前端路由接管回调（推荐） #

把Google回调指向前端路由，前端拿到授权码后再调用后端接口交换token，完全复用现有前端登录处理逻辑：

1. 修改Google配置：将Google控制台和后端GoogleStrategy的callbackURL改为前端路由，比如${process.env.CLIENT_URL_DEV}/auth/google/callback
2. 前端处理回调：在前端/auth/google/callback路由中提取URL的code参数，调用后端新增的接口：

// 前端示例（React/Vue等框架）
const GoogleCallback = () => {
  useEffect(() => {
    const code = new URLSearchParams(window.location.search).get('code');
    if (code) {
      // 调用后端接口交换token
      fetch('/auth/google/token', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ code })
      })
      .then(res => res.json())
      .then(authData => {
        // 直接复用本地登录的成功处理逻辑
        handleLoginSuccess(authData);
        // 跳转到主页
        navigate('/');
      });
    }
  }, []);
};

3. 后端新增接口：处理前端传来的授权码，完成用户查找/创建并返回统一格式响应：

router.post('/google/token', async (req, res) => {
  const { code } = req.body;
  try {
    // 向Google请求交换token
    const tokenResponse = await fetch('https://oauth2.googleapis.com/token', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: new URLSearchParams({
        code,
        client_id: process.env.GOOGLE_CLIENT_ID,
        client_secret: process.env.GOOGLE_CLIENT_SECRET,
        redirect_uri: `${process.env.CLIENT_URL_DEV}/auth/google/callback`,
        grant_type: 'authorization_code'
      })
    });
    const tokenData = await tokenResponse.json();

    // 获取Google用户信息
    const userInfoResponse = await fetch('https://www.googleapis.com/oauth2/v3/userinfo', {
      headers: { Authorization: `Bearer ${tokenData.access_token}` }
    });
    const googleUser = await userInfoResponse.json();

    // 查找或创建本地用户
    let user = await User.findOne({ googleId: googleUser.sub });
    if (!user) {
      user = await new User({
        provider: 'google',
        googleId: googleUser.sub,
        username: `user${googleUser.sub}`,
        email: googleUser.email,
        name: googleUser.name
      }).save();
    }

    // 返回统一格式的响应
    const accessToken = user.generateJWT();
    const refreshToken = user.generateRefreshToken();
    const userInfo = user.toJSON();
    res.json({ accessToken, refreshToken, userInfo });
  } catch (err) {
    console.error(err);
    res.status(500).json({ message: 'Google认证失败' });
  }
});

方案2：后端返回中转HTML页面 #

后端在回调时返回一个内嵌JS的HTML页面，自动把token数据存入前端本地存储后跳转到主页：

1. 修改回调处理方法：新增loginWithGoogle替换原有的login：

const loginWithGoogle = (req: Request, res: Response) => {
  const accessToken = req.user.generateJWT();
  const refreshToken = req.user.generateRefreshToken();
  const userInfo = req.user.toJSON();
  
  // 生成中转HTML页面
  const html = `
    <!DOCTYPE html>
    <html>
      <body>
        <script>
          // 把认证数据存入localStorage
          localStorage.setItem('googleAuthData', JSON.stringify(${JSON.stringify({ accessToken, refreshToken, userInfo })}));
          // 跳转到前端主页
          window.location.href = '${process.env.CLIENT_URL_DEV}';
        </script>
      </body>
    </html>
  `;
  res.send(html);
};

2. 更新回调路由：

router.get('/google/callback', passport.authenticate('google', { 
    failureRedirect: '/', session: false,}),
  authController.loginWithGoogle
);

3. 前端主页添加读取逻辑：在前端主页初始化时检查本地存储，拿到数据后复用现有登录处理逻辑：

// 前端主页示例
useEffect(() => {
  const authData = localStorage.getItem('googleAuthData');
  if (authData) {
    handleLoginSuccess(JSON.parse(authData));
    localStorage.removeItem('googleAuthData'); // 清理数据
  }
}, []);

方案3：弹窗式登录 #

前端通过弹窗打开Google登录页面，回调后在弹窗中通过postMessage把数据传给主窗口，再关闭弹窗：

1. 前端打开弹窗：

const openGoogleLoginPopup = () => {
  const popup = window.open('/auth/google', 'GoogleLogin', 'width=600,height=600');
  // 监听弹窗消息
  window.addEventListener('message', (event) => {
    if (event.origin === process.env.REACT_APP_SERVER_URL) {
      const authData = event.data;
      handleLoginSuccess(authData); // 复用本地登录逻辑
      popup.close();
    }
  });
};

2. 后端修改回调响应：

const loginWithGoogle = (req: Request, res: Response) => {
  const accessToken = req.user.generateJWT();
  const refreshToken = req.user.generateRefreshToken();
  const userInfo = req.user.toJSON();
  const authData = { accessToken, refreshToken, userInfo };
  
  const html = `
    <!DOCTYPE html>
    <html>
      <body>
        <script>
          // 向主窗口发送认证数据
          window.opener.postMessage(${JSON.stringify(authData)}, '${process.env.CLIENT_URL_DEV}');
          window.close();
        </script>
      </body>
    </html>
  `;
  res.send(html);
};

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