解决Vue使用axios发送请求时，第一次请求无法携带token的问题

神厨小rich婆

已于 2024-04-08 10:28:10 修改

阅读量1.1k

点赞数 11

文章标签： javascript 前端 vue.js

于 2024-04-08 10:26:26 首次发布

本文链接：https://blog.csdn.net/qq_27039987/article/details/137497466

版权

文章讲述了在Vue应用中，如何修正使用axios发送请求时初次请求不携带token的问题，通过在transformRequest中动态添加headers，以及设置响应拦截器处理token过期情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原始的写法

import axios  from 'axios'
import Cookies from "js-cookie"

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: "http://127.0.0.1",
  // 超时
  timeout: 10000,
  headers: {
    'authorization': getToken()
  }
})

function getToken(){
  return Cookies.get("token");
}

export default service

修改后的写法

使用transformRequest 允许将请求数据发送到服务器之前进行修改

import axios  from 'axios'
import Cookies from "js-cookie"

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: "http://127.0.0.1",
  // 超时
  timeout: 10000,
  // headers: {
  //   'authorization': getToken()
  // },

  //  开始是全局添加的 headers, 如上， 没有做处理，就会出现第一次登陆后， 带不上token的情况。
  //transformRequest 允许将请求数据发送到服务器之前进行修改
  transformRequest: [function (data, headers) {
    headers['Authorization'] = Cookies.get("token")
    return JSON.stringify(data)
  }]
})

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 请求成功处理
    return response;
  },
  error => {
    if (error.response) {
      // 判断token是否过期
      if (error.response.status === 403) {
        // 清除token信息
        Cookies.remove("token")
        // 跳转到登录页面，或者执行其他逻辑
        // location.href = '/login';
      }
    }
  })
export default service