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.withCredentials = false;
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
axios.interceptors.request.use((config) => {
let token = window.localStorage.getItem('token');
token && (config.headers.token = token)
return config;
}, (error) => {
return Promise.reject(error);
});
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,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
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.withCredentials = false;
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
axios.interceptors.request.use((config) => {
let token = window.localStorage.getItem('token');
token && (config.headers.token = token)
return config;
}, (error) => {
return Promise.reject(error);
});
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);
});