ASP.NET Core React SPA应用中如何在登录回调时获取JWT token

我之前处理过类似的场景，给你几个实用的实现思路，你可以根据自己的安全需求和架构偏好选择：

方案1：将JWT作为查询参数附加到重定向URL #

这是最简单的实现方式，在回调方法生成JWT后，把它编码后拼到首页的重定向地址里，前端加载时读取参数并存储，然后清理地址栏里的token避免暴露。

后端Callback方法示例 #

public async Task<IActionResult> Callback()
{
    // 验证社交登录返回的用户信息
    var authenticatedUser = await ValidateSocialLoginUser();
    if (authenticatedUser == null)
    {
        return RedirectToAction("Login");
    }

    // 生成你的JWT Token
    var jwtToken = GenerateJwtToken(authenticatedUser);

    // 销毁社交平台的Cookie
    Response.Cookies.Delete("your-social-cookie-name");

    // 编码token后拼到重定向URL，避免特殊字符问题
    var encodedToken = Uri.EscapeDataString(jwtToken);
    return Redirect($"/?authToken={encodedToken}");
}

React前端首页处理示例 #

import { useEffect } from 'react';

function HomePage() {
  useEffect(() => {
    // 读取URL查询参数里的token
    const urlParams = new URLSearchParams(window.location.search);
    const token = urlParams.get('authToken');
    
    if (token) {
      // 将token存储到localStorage或sessionStorage
      localStorage.setItem('userAuthToken', token);
      // 清理地址栏里的token，避免留在历史记录中
      window.history.replaceState({}, document.title, window.location.pathname);
    }
  }, []);

  // 后续业务逻辑...
  return <div>欢迎回到首页</div>;
}

export default HomePage;

注意：这种方式的token会短暂出现在地址栏和浏览器历史里，适合非高度敏感的场景；如果追求更高安全性，可以配合短时效的access token，后续前端再用refresh token换取新的access token。

方案2：用临时Cookie传递JWT #

把JWT存入一个非HttpOnly的临时Cookie中，前端读取后立即删除这个Cookie，这样token不会出现在地址栏，安全性比方案1更高。

后端Callback方法示例 #

public async Task<IActionResult> Callback()
{
    // 验证用户、生成JWT逻辑同上
    var jwtToken = GenerateJwtToken(authenticatedUser);

    // 设置临时Cookie：允许前端JS读取，短时效避免残留
    Response.Cookies.Append("temp-auth-token", jwtToken, new CookieOptions
    {
        HttpOnly = false, // 关键：设为false让前端能读取
        Secure = true, // 生产环境必须开启，确保HTTPS传输
        SameSite = SameSiteMode.Strict,
        Expires = DateTimeOffset.UtcNow.AddMinutes(1)
    });

    Response.Cookies.Delete("your-social-cookie-name");
    return Redirect("/");
}

React前端处理示例 #

import { useEffect } from 'react';

// 封装读取Cookie的工具函数
const getCookieValue = (cookieName) => {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${cookieName}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
};

function HomePage() {
  useEffect(() => {
    const tempToken = getCookieValue("temp-auth-token");
    if (tempToken) {
      localStorage.setItem('userAuthToken', tempToken);
      // 立即删除临时Cookie
      document.cookie = "temp-auth-token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
    }
  }, []);

  return <div>欢迎回到首页</div>;
}

export default HomePage;

额外安全建议 #

• 生产环境必须使用HTTPS，防止token在传输过程中被劫持
• 建议将refresh token存入HttpOnly的Cookie中，前端只存储短时效的access token，降低泄露风险
• 后续前端发起API请求时，要在请求头中携带：Authorization: Bearer {你的JWT Token}

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