登录成功后如何将JWT发送给前端存储至localStorage中？

你提到的「缓存JWT+Cookie存key前端主动拉取」的方案确实存在冗余逻辑和额外安全风险，以下是两种经过生产环境验证的成熟实现方案：

方案1：URL查询参数传递JWT（适用于短期JWT场景） #

• 实现逻辑：谷歌OAuth回调验证用户身份通过后，服务端生成JWT，直接拼接在前端重定向地址的查询参数中，示例代码：

  // 服务端passport谷歌回调路由逻辑
  app.get('/auth/google/callback', 
    passport.authenticate('google', { failureRedirect: '/login' }),
    function(req, res) {
      const token = generateJWT(req.user);
      res.redirect(`https://your-frontend.com/oauth/callback?token=${token}`);
    });
  

• 前端处理逻辑：在前端/oauth/callback路由中读取URL查询参数的token，存入本地状态（内存或者localStorage）后立即删除URL中的token参数，避免留在浏览器历史记录中。
• 安全注意事项：
  • 该方案使用的JWT必须设置极短的过期时间（建议5分钟以内），避免URL泄露导致token被盗用
  • 全站必须强制HTTPS，避免传输过程中被窃听
  • 不要在JWT中存储密码、身份证号等敏感用户信息

方案2：HttpOnly Cookie存储JWT（最安全的推荐方案） #

• 实现逻辑：谷歌OAuth回调验证通过后，服务端直接在重定向响应头中设置Set-Cookie，将JWT存入Cookie，Cookie必须配置安全属性，示例配置：

  Set-Cookie: jwt=你的JWT内容; HttpOnly; Secure; SameSite=Lax; Path=/; Max-Age=86400
  

• 核心优势：
  • HttpOnly属性禁止JS读取Cookie，完全规避XSS攻击偷取token的风险
  • Secure保证Cookie仅在HTTPS环境下传输，SameSite属性可防御CSRF攻击
  • 不需要额外的缓存、前端主动拉取逻辑，没有冗余代码
• 额外适配要求：如果是前后端跨域部署，需要做两处配置：
  • 前端发请求时开启携带凭证配置，比如axios设置withCredentials: true
  • 服务端CORS配置要开启Access-Control-Allow-Credentials: true，且不能设置Access-Control-Allow-Origin: *，需要指定具体的前端域名
• 后续交互：前端不需要手动处理token，所有请求浏览器会自动携带该Cookie，服务端直接从Cookie中读取JWT校验即可。

主动拉取方案的补充说明 #

该方案仅适用于你必须将JWT返回给前端JS使用，同时又不能放在URL参数中的特殊场景，普通业务无需使用

• 如果一定要用该方案，缓存JWT时必须设置不超过1分钟的过期时间，用户拉取到token后服务端要立即删除对应缓存，降低泄露风险
• 存储缓存key的Cookie同样要配置HttpOnly、Secure、SameSite安全属性，避免key被盗用

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