React+Node项目使用Google登录时如何获取请求头令牌完成GET请求鉴权

原有代码失效的根因 #

• 核心错误是请求头对象访问错误：以Node生态最常用的Express框架为例，所有请求头都挂载在req.headers（复数形式）对象上，req.header是框架封装的请求头获取方法，不是存储头字段的对象，直接访问req.header.authorization拿到的本身就是undefined，后续链式调用split自然无法得到预期结果。
• 缺少空值与格式校验：如果前端未传Authorization头、或者传值不符合规范，无兜底的链式调用会直接抛出服务端500错误，而非正常返回空值。
• 未遵循标准令牌传参格式：Authorization头的Bearer令牌规范格式为Bearer <令牌内容>，拆分后必须校验前缀合法性，避免拿到非法值。

正确实现代码 #

Node端（Express）令牌提取逻辑 #

// 封装通用令牌提取方法
const extractBearerToken = (req) => {
  // 两种方式获取请求头均可，框架自动兼容字段大小写
  const authHeader = req.headers.authorization ?? req.header('Authorization')
  if (!authHeader) return null

  const [schema, token] = authHeader.trim().split(' ')
  // 校验格式必须为 Bearer xxx
  if (schema !== 'Bearer' || !token) return null
  return token
}

// GET接口鉴权使用示例
app.get('/api/protected/resource', (req, res) => {
  const token = extractBearerToken(req)
  if (!token) {
    return res.status(401).json({ msg: '鉴权失败：无效的访问令牌' })
  }

  // 后续调用Google官方服务端SDK校验token合法性、解析用户信息即可
  // 禁止手动解析JWT内容做校验，避免伪造令牌绕过鉴权
})

React端请求传参注意事项 #

前端发GET请求时必须按规范把Google登录返回的id_token放到请求头中，参考实现：

// 以fetch请求为例，axios等其他请求库写法逻辑一致
const getProtectedResource = async () => {
  // 替换为实际存储的Google登录返回的id_token
  const googleToken = localStorage.getItem('google_auth_token')
  const resp = await fetch('/api/protected/resource', {
    method: 'GET',
    headers: {
      // 严格遵循 Bearer+空格+令牌 的格式
      Authorization: `Bearer ${googleToken}`
    }
  })
  // 后续处理响应逻辑
}

避坑提示：不要使用网上零散的已废弃的第三方passport策略类库，直接使用Google官方维护的服务端SDK做令牌校验即可，兼容性和安全性都有保障。

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