React JS中如何通过Axios GET请求携带JWT令牌

正确请求写法 #

分两种场景配置，按需选择即可：

1. 仅单个接口需要携带JWT
   直接在GET请求的配置项里注入请求头，注意Authorization字段的格式要求：

// 从本地存储读取登录成功后保存的JWT令牌，key替换成你项目实际存储用的key
const jwtToken = localStorage.getItem('access_token')

axios.get('/api/user/posts/mine', {
  headers: {
    // 格式必须为 Bearer + 半角空格 + 令牌内容，缺空格/前缀错误都会导致鉴权失败
    Authorization: `Bearer ${jwtToken}`
  }
})
.then(response => {
  // 接口返回的个人帖子数据存在response.data里，直接赋值给页面渲染变量即可
  const myPostList = response.data
})
.catch(error => {
  // 错误处理逻辑
  if (error.response?.status === 401) {
    // 鉴权失败场景，清空本地失效token，跳回登录页
    localStorage.removeItem('access_token')
    location.href = '/login'
  }
})

2. 项目多个接口需要携带JWT
   配置Axios全局请求拦截器统一注入令牌，不用每个接口重复写headers配置：

// 创建项目通用Axios实例
const request = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 8000
})

// 请求拦截器：所有发出去的请求自动带JWT
request.interceptors.request.use(config => {
  const token = localStorage.getItem('access_token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

// 后续调用拉取个人帖子接口时无需单独配置头
request.get('/user/posts/mine').then(res => {
  const myPostList = res.data
})

常见问题排查点 #

如果按上面写法还是请求失败，逐个核对以下点：

• 确认本地存储的JWT取值正确，不要出现存的时候key叫user_token、取的时候写access_token拿到null的低级错误
• 跨域场景下让后端配置CORS规则，允许Authorization作为合法请求头，否则浏览器会直接拦截跨域请求
• 确认后端鉴权逻辑支持从GET请求的请求头读取令牌，部分后端写鉴权逻辑时只处理POST请求体里的token，会导致GET请求鉴权失败
• 检查JWT是否在有效期内，过期令牌会被后端直接返回401，需要重新登录获取新令牌
• 不要把JWT拼在GET请求的url参数里，存在令牌泄露的安全风险，标准做法都是放在请求头中传递

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