如何在React项目中从DRF接口获取服务端生成的Bearer令牌？

首先要提前确认：你的DRF后端已经配置了JWT相关的认证逻辑，且登录接口会返回Bearer令牌，如果你目前登录响应里只有csrf token和session id，说明后端还没配置返回Bearer令牌，需要先调整后端代码，比如集成djangorestframework-simplejwt模块来生成并返回令牌。

Bearer令牌的提取方式取决于你后端返回它的位置，常见两种场景对应的操作如下：

场景1：令牌放在登录接口响应Body中 #

这是DRF对接JWT时最常用的返回方式，simplejwt默认也是将access、refresh令牌放在响应体返回。

• 直接在axios登录请求的响应回调中读取对应字段即可，示例代码：

axios.post('/api/auth/login/', {
  username: '你的账号',
  password: '你的密码'
}, {
  headers: {
    'X-CSRFToken': 你提前获取的csrfToken // 调用登录接口需要携带csrf凭证
  }
}).then(res => {
  // 字段名和你后端定义的保持一致即可，常见命名为access、token
  const bearerToken = res.data.access
  // 提取后可以存储在localStorage或sessionStorage中方便后续调用
  localStorage.setItem('bearer_token', bearerToken)
})

• 注意：如果后端返回的字段值自带Bearer 前缀可以直接使用，若只返回纯令牌值，后续请求携带时需要手动拼接为Authorization: Bearer ${bearerToken}的格式。

场景2：令牌放在自定义响应头中 #

如果后端将令牌放在Authorization、X-Access-Token这类自定义响应头中返回，需要做两步操作：

1. 先调整Django后端settings配置，将存放令牌的响应头加入跨域暴露列表，否则浏览器会默认拦截，前端无法读取：

# settings.py
CORS_EXPOSE_HEADERS = ['Authorization', 'X-Access-Token'] # 填入你实际使用的响应头名称

2. 前端从axios响应的headers对象中提取即可，示例代码：

axios.post('/api/auth/login/', loginParams, csrfConfig).then(res => {
  // 注意axios获取响应头时默认转成小写，比如后端返回Authorization，要取res.headers.authorization
  const authHeader = res.headers.authorization
  // 标准格式为Bearer <令牌值>，分割后即可拿到纯令牌
  const bearerToken = authHeader.split(' ')[1]
  localStorage.setItem('bearer_token', bearerToken)
})

额外提醒 #

你提到登录后服务端下发的csrf token和session id属于Django Session认证体系的凭证，和Bearer令牌是两套独立的认证逻辑，使用时不要混淆凭证对应的使用场景。

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