axios封装(升级版)
2021-8-26更新 之前封装的axios 多多少少有点low 这是升级优化版
1.创建生产环境地址 (本机地址)
.env.development文件
VUE_APP_BASE_URL='/api'
创建开发环境地址(java后台地址)
.env.production文件
VUE_APP_BASE_URL='http://106.14.26.32:8080/api'
2.在Axios代理处判断环境,进行相关的操作
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
devServer: {
//代理
proxy: {
// 拦截请求接口,判断是不是/api开头的,如果是,是使用代理服务器。
'/api': {
target: 'http://106.14.26.32:8080', //这里是目标服务器地址
changeOrigin: true,
// ws: true,
pathRewrite: {
'^/api': '' //这里一定要为空
}
}
}
}
}
3.在store里面添加文件,用来封装axios
import axios from 'axios';
import router from '../router/index'
let baseUrl = process.env.NODE_ENV === 'development' ? process.env.VUE_APP_BASE_URL : process.env.VUE_APP_BASE_URL;
console.log(baseUrl)
let http = axios.create({
timeout: 10000,
baseURL: baseUrl
// ,
// // headers:{
// // 'Content-Type':'application/json'
// // }
});
// 拦截前
http.interceptors.request.use(req=>{
// console.log('请求前');
let token = sessionStorage.getItem('token');
token && (req.headers['authenticate'] = token);
return req
},error=>Promise.reject(error));
//响应后干什么
http.interceptors.response.use(resp=>{
//比如可以将后台给我们token 存起来
// 直接把拦截器放到main.js中,多一个.data
// resp.data.data.token && sessionStorage.setItem('token',resp.data.data.token);
//封装在HTTP.JS中,就少写一个.data;
resp.data.token && sessionStorage.setItem('token',resp.data.token);
return resp
},error=>{
let _resp = error.response;
switch (_resp.status) {
case 401 :
//把本地的token清除 跳转到login
sessionStorage.removeItem('token')
// sessionStorage.removeItem('userName')
// sessionStorage.removeItem('type')
// alert('身份已过期,请重新登录')
return router.push('/login') // 跳转到登录页面;
}
return Promise.reject(error.response.data)
});
export default http
4.main.js需要修改,要拿到实例
import http from './store/http.js';
Vue.prototype.$axios = http;
5.在使用后台接口时就不需要在写/api了