Monorepo中调用NestJS GoogleAuth登录后如何返回React应用？

核心问题分析 #

1. Axios调用无法触发OAuth跳转：OAuth2授权码流程需要浏览器直接重定向到Google授权页，Axios是后台AJAX请求，不会触发浏览器页面跳转，因此无法弹出登录窗口。
2. 跳转后卡在API响应页：当前redirect路由直接返回JSON，没有将用户重定向回React前端，导致登录完成后停留在API响应页面。

分步解决方案 #

1. 修复React端登录触发逻辑 #

把Axios调用替换为浏览器直接跳转，让OAuth流程正常触发：

import { useState, useEffect } from 'react';

function App() {
  const [loggedIn, setLoggedIn] = useState(false);

  // 页面加载时检查登录状态
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const token = params.get('token');
    if (token) {
      localStorage.setItem('authToken', token);
      setLoggedIn(true);
      // 清除URL中的token参数，优化页面体验
      window.history.replaceState({}, document.title, window.location.pathname);
    } else if (localStorage.getItem('authToken')) {
      setLoggedIn(true);
    }
  }, []);

  function handleSignOn() {
    // 直接跳转至NestJS的OAuth登录路由
    window.location.href = "http://localhost:3001/auth/google/login";
  }

  return (
    <div>
      <button
        style={{ width: "10em", height: "fit-content" }}
        onClick={handleSignOn}>
        sign in
      </button>
      <h3>{String(loggedIn)}</h3>
    </div>
  );
}

export default App;

2. 优化NestJS的Redirect路由 #

登录成功后生成认证凭证（JWT），并重定向回React前端：

import { Controller, Get, UseGuards, Req, Redirect } from '@nestjs/common';
import { GoogleAuthGuard } from './google-auth.guard';
import { AuthService } from './auth.service';

@Controller('auth')
export class AuthController {
  constructor(private readonly authService: AuthService) {}

  @Get('google/login')
  @UseGuards(GoogleAuthGuard)
  googleLogin() {
    // 此方法会被Guard自动重定向到Google授权页，返回值不会生效
  }

  @Get('google/redirect')
  @UseGuards(GoogleAuthGuard)
  @Redirect('http://localhost:3000') // 默认重定向地址
  async handleRedirect(@Req() req) {
    // 从req.user获取Google返回的用户信息（需在Guard中配置映射逻辑）
    const jwtToken = await this.authService.generateToken(req.user);
    // 携带token重定向回React前端
    return { url: `http://localhost:3000?token=${jwtToken}` };
  }
}

3. 配置NestJS跨域支持 #

在main.ts中开启CORS，允许React域名访问：

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors({
    origin: 'http://localhost:3000', // React应用地址
    credentials: true, // 若使用HttpOnly Cookie存储token需开启
  });
  await app.listen(3001);
}
bootstrap();

额外说明 #

• 如果追求更高安全性，建议用HttpOnly Cookie存储JWT，而非URL参数，避免XSS风险。
• Google OAuth Guard需正确配置callbackURL，确保与NestJS的redirect路由一致，且已在Google Cloud Console中添加该回调地址。

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