Vue - 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

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

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

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

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’即可
    }
  }
},

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

axios.defaults.baseURL = "/api"

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

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);
});