解决Vue使用axios发送请求时，第一次请求无法携带token的问题_axios请求拦截器没有token不发送请求

原始的写法

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

修改后的写法

使用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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40