React+TS对接Nest Google授权后，前端如何获取存储Token？

问题核心 #

OAuth2授权是浏览器端的跳转流程，并非AJAX请求，所以不能用axios直接调用/auth/google/callback。需要调整后端回调逻辑，让它完成授权后跳回前端并携带Token，再由前端从URL中提取Token存入localStorage。

解决方案步骤 #

1. 修改Nest后端的Google回调接口

将原接口直接返回JSON的逻辑，改为授权成功后跳转到前端页面，把Token作为查询参数传递：

@Get('google/callback')
@UseGuards(AuthGuard('google'))
async googleAuthRedirect(@Req() req, @Res() res) {
  const tokens = await this.authService.googleLogin(req);
  // 跳转到前端poll页面，携带Token参数
  return res.redirect(`http://localhost:5173/poll?access_token=${tokens.access_token}&refresh_token=${tokens.refresh_token}`);
}

2. 前端React处理Token存储

在/poll页面组件中，挂载时读取URL查询参数，提取Token存入localStorage，同时清除地址栏中的Token参数：

import { useEffect } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';

const PollPage = () => {
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();

  useEffect(() => {
    const accessToken = searchParams.get('access_token');
    const refreshToken = searchParams.get('refresh_token');
    
    if (accessToken && refreshToken) {
      // 存入localStorage
      localStorage.setItem('access_token', accessToken);
      localStorage.setItem('refresh_token', refreshToken);
      // 清除URL中的Token参数，避免泄露
      searchParams.delete('access_token');
      searchParams.delete('refresh_token');
      navigate({ search: searchParams.toString() }, { replace: true });
    }
  }, [searchParams, navigate]);

  return <div>Poll页面内容</div>;
};

export default PollPage;

3. 前端登录按钮实现直接跳转

登录按钮不要用axios，直接通过页面跳转打开后端授权地址：

const LoginButton = () => {
  const handleGoogleLogin = () => {
    window.location.href = 'http://localhost:3333/auth/google';
  };

  return <button onClick={handleGoogleLogin}>Google登录</button>;
};

export default LoginButton;

额外注意事项 #

• 确保Nest后端配置正确的CORS规则，允许前端域名请求：

  // main.ts中
  async function bootstrap() {
    const app = await NestFactory.create(AppModule);
    app.enableCors({
      origin: 'http://localhost:5173',
      credentials: true,
    });
    await app.listen(3333);
  }
  bootstrap();
  

• 若担心URL暴露Token的安全性，可考虑用后端设置HttpOnly Cookie传递refresh_token，access_token仍需存在前端用于API请求。

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