Vue - axios 添加拦截器，配置请求头，添加 token 验证_axios 设置是否需要token

一. 配置 axios

1. static 文件夹中创建一个 api 文件夹，api 文件中创建一个 http.js 文件

2. 配置 http.js 文件

import Vue from 'vue'
import axios from 'axios'
import ElementUI from 'element-ui';
import router from '../../src/router'

// 配置请求默认接口
axios.defaults.baseURL = "http://xxxx:8080"
// 设置请求超时时间
// axios.defaults.timeout = 15000 
// 是否允许跨域携带cookie信息
axios.defaults.withCredentials = false;
// 配置请求头
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
// http request 拦截器 添加一个请求拦截器
axios.interceptors.request.use((config) => {
    // config 是 axios 配置对象
    // 获取token
    let token = window.localStorage.getItem('token');
    // 添加token
    token && (config.headers.token = token)
    return config;
}, (error) => {
    // 请求出错
    return Promise.reject(error);
});
// http response 拦截器 添加一个响应拦截器
axios.interceptors.response.use((response) => {
    // 响应成功，根据后台返回数据统一处理错误码
    switch (response.data.code) {
        case 5005:
            // 提示内容及操作
            ElementUI.Message({
	            message: "登录超时，请重新登录验证！",
	            type: 'warning'
	        });
	        router.push('/login')
            break;
        case 401:
            // 提示内容及操作
            break;
        // 更多状态提示...
    }
    return response;
}, (error) => {
    // 响应失败
    return Promise.reject(error);
})

Vue.prototype.$axios = axios
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
41
42
43
44
45
46
47
48
49

3. main.js 中引入 http.js 文件

import '../static/api/http.js'
1

二. 组件中发送接口请求时，会发现报跨域错误

1. 配置 config 文件夹中的 index.js 文件

proxyTable: {
  '/api': {
    target: 'http://xxxx:8080',//设置调用的接口域名和端口号
    secure: false,  // 如果是https接口，需要配置这个参数
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''//将api 重写为空，这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://localhost:8080/user/login'，直接写‘/api/user/login’即可
    }
  }
},
1
2
3
4
5
6
7
8
9
10

2. 修改 http.js 文件中的 默认接口

axios.defaults.baseURL = "/api"
1

3. 修改之后的 http.js

import Vue from 'vue'
import axios from 'axios'
import ElementUI from 'element-ui';
import router from '../../src/router'

// 配置请求默认接口
axios.defaults.baseURL = "/api"
// 设置请求超时时间
// axios.defaults.timeout = 15000 
// 是否允许跨域携带cookie信息
axios.defaults.withCredentials = false;
// 配置请求头
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
// http request 拦截器 添加一个请求拦截器
axios.interceptors.request.use((config) => {
    // config 是 axios 配置对象
    // 获取token
    let token = window.localStorage.getItem('token');
    // 添加token
    token && (config.headers.token = token)
    return config;
}, (error) => {
    // 请求出错
    return Promise.reject(error);
});
// http response 拦截器 添加一个响应拦截器
axios.interceptors.response.use((response) => {
    // 响应成功，根据后台返回数据统一处理错误码
    switch (response.data.code) {
        case 5005:
            // 提示内容及操作
            ElementUI.Message({
	            message: "登录超时，请重新登录验证！",
	            type: 'warning'
	        });
	        router.push('/login')
            break;
        case 401:
            // 提示内容及操作
            break;
        // 更多状态提示...
    }
    return response;
}, (error) => {
    // 响应失败
    return Promise.reject(error);
})

Vue.prototype.$axios = axios
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
41
42
43
44
45
46
47
48
49

4. npm run dev重启项目，发现接口正常请求。

三. 总结 axios 拦截器（请求和响应）

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17