1、引入axios、token
import axios from "axios"
import { Message, MessageBox } from "element-ui"
import {getToken, removeToken} from "./token";
2、创建axios实例
可以使用自定义配置新建一个 axios 实例
axios.create([config])
const service = axios.create({
baseURL: process.env.VUE_APP_API_BASE, // api的base_url
timeout: 5000 // 请求超时时间
})
3、添加请求拦截器request
在请求被 then
或 catch
处理前拦截它们。
service.interceptors.request.use(
config => {
let token = getToken();
if (token && token !== undefined && token !== "" && token !== "undefined") {
config.headers['Authorization'] = "Bearer " + token;
}
return config;
},
error => {
Promise.reject(error);
}
);
浏览器调试
4、添加响应拦截器respone
在响应被 then
或 catch
处理前拦截它们。
service.interceptors.response.use(
response => {
// 文件流
if(response.config.responseType === 'blob'){
return response
}
// code
let msg: string = '';
switch (response.data.code) {
case '0102': // token失效
msg = '登录已失效,请重新登录';
break;
case '0101': // 半小时无操作
msg = '半小时无操作,请重新登录';
break;
case '0103': // 用户密码被重置
msg = '用户密码被重置,请重新登录';
break;
default:
break;
}
if(msg !== ''){
Message.error(msg);
removeToken();
window.location.hash = '#login';
window.location.reload();
// (this as any).$router.push('/login')
}
if(response.data.code !== '0000'){
Message({
message: response.data.message,
type: 'error',
duration: 5 * 1000
});
return Promise.reject(response.data)
}
return response.data
},
error => {
Message({
message: error.message,
type: "error",
duration: 5 * 1000
});
return Promise.reject(error);
}
);
export default service;