如何在React项目中使用axios将token正确设置到请求头中

你调用auth/register注册接口时，token是服务端注册成功后才返回的，调用接口前token变量尚未赋值，自然会出现undefined的情况，注册类的公开接口本身不需要携带token，仅后续需要鉴权的接口需要配置token。

方案1：使用axios拦截器全局统一配置（推荐） #

这种方式不需要每次请求手动传递token，所有请求会自动携带，适配大部分业务场景。

第一步：创建自定义axios实例 #

新建src/utils/request.js文件，代码如下：

import axios from 'axios'

// 创建专属axios实例，避免污染全局axios配置
const service = axios.create({
  baseURL: '/api', // 统一请求前缀，后续请求无需重复拼接/api
  timeout: 10000 // 请求超时时间可按需调整
})

// 请求拦截器：发送请求前自动注入token到请求头
service.interceptors.request.use(
  config => {
    // 从本地存储读取已保存的token
    const token = localStorage.getItem('accessToken')
    if (token) {
      // 注意：常规JWT鉴权格式为`Bearer ${token}`，无需冒号，若后端要求带冒号可保留原写法
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

export default service

第二步：注册成功后存储token #

调用注册接口拿到返回值后，将token存入本地存储：

// 注册接口无需鉴权，直接发起请求即可
const res = await service.post('auth/register', data)
if (res.data.success) {
  // 存储token到本地
  localStorage.setItem('accessToken', res.data.accessToken)
  // 后续所有需要鉴权的接口直接用service实例发起，会自动携带token
  // 示例：获取用户信息
  // const userInfo = await service.get('/user/profile')
}

方案2：改造现有postDataApi辅助函数 #

如果你不想改动现有调用逻辑，可以直接改造原辅助函数，自动读取本地token：

// 改造后的辅助函数，无需每次手动传token
export const postDataApi = async (url, post) => {
  const token = localStorage.getItem('accessToken')
  const res = await axios.post(`/api/${url}`, post, {
    headers: token ? { Authorization: `Bearer ${token}` } : {}
  })
  return res
}

调用时只需传url和请求参数即可：

// 注册接口
const res = await postDataApi("auth/register", data);
if (res.data.success) {
  localStorage.setItem('accessToken', res.data.accessToken)
}
// 后续鉴权接口直接调用即可
// const res2 = await postDataApi("auth/getInfo", params);

注意事项 #

如果你的后端鉴权要求Authorization头的格式为Bearer: ${token}（带冒号），可以把上面代码里的Bearer ${token}改成Bearer: ${token}即可。

内容的提问来源于stack exchange，提问作者Cihan Özcan