axios请求头Token管理：从安全实践到性能优化

1次阅读

共计 2376 个字符，预计需要花费 6 分钟才能阅读完成。

在现代前端应用中，JWT Token 作为身份验证的常见方式，通常需要通过请求头传递给后端。但这种做法存在两个主要问题：

安全风险 ：Token 直接暴露在请求头中，容易被中间人攻击或通过 XSS 漏洞窃取
并发问题 ：当 Token 过期需要刷新时，多个并发请求可能同时触发刷新逻辑，导致 Token 竞争

// 每次请求都需要重复写 headers
axios.get('/api/data', {headers: { Authorization: `Bearer ${token}` }
})

优点：简单直接
缺点：代码重复，容易遗漏，维护困难

// 请求拦截器示例
axios.interceptors.request.use(config => {config.headers.Authorization = `Bearer ${getToken()}`
  return config
})

优点：集中管理，避免重复代码
缺点：需要处理 Token 刷新等复杂场景

// 结合 Redux/Vuex 的示例
store.subscribe(() => {const token = store.getState().auth.token
  axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
})

优点：与应用状态深度集成
缺点：增加了架构复杂度

import axios from 'axios'
import {refreshToken} from './auth'

let isRefreshing = false
let failedQueue: any[] = []

const processQueue = (error: any, token?: string) => {
  failedQueue.forEach(prom => {if (error) {prom.reject(error)
    } else {prom.resolve(token)
    }
  })
  failedQueue = []}

axios.interceptors.request.use(config => {const token = localStorage.getItem('token')
  if (token) {config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, error => {return Promise.reject(error)
})

axios.interceptors.response.use(
  response => response,
  async error => {
    const originalRequest = error.config

    if (error.response.status === 401 && !originalRequest._retry) {if (isRefreshing) {return new Promise((resolve, reject) => {failedQueue.push({ resolve, reject})
        }).then(token => {originalRequest.headers.Authorization = `Bearer ${token}`
          return axios(originalRequest)
        }).catch(err => {return Promise.reject(err)
        })
      }

      originalRequest._retry = true
      isRefreshing = true

      try {const newToken = await refreshToken()
        localStorage.setItem('token', newToken)
        axios.defaults.headers.common['Authorization'] = `Bearer ${newToken}`
        processQueue(null, newToken)
        return axios(originalRequest)
      } catch (err) {processQueue(err)
        return Promise.reject(err)
      } finally {isRefreshing = false}
    }

    return Promise.reject(error)
  }
)

减少 Token 验证请求 ：
对静态资源请求禁用拦截器
实现 Token 有效期缓存检查
请求队列管理 ：
如上述代码所示，使用队列处理并发刷新场景
设置合理的超时时间（建议 5 -10 秒）

方案	优点	缺点
Header	适合前后端分离架构	易受 XSS 攻击
HttpOnly Cookie	防止 XSS 窃取	需处理 CSRF 防护

// 双重提交 Cookie 模式
axios.interceptors.request.use(config => {const csrfToken = getCSRFToken() // 从 meta 标签或 Cookie 获取
  config.headers['X-CSRF-TOKEN'] = csrfToken
  return config
})