vue请求拦截和响应拦截

import axios from 'axios';
import {Message,Loading} from 'element-ui';
import { config } from 'rxjs';
import router from "./router";
let loading;
function startLoading(){
//需要调用loading的时候调用
loading=Loading.service({
lock:true,
text:"拼命加载中...",
background: 'rgba(0,0,0,0,7)'
});
}

function endLoading(){
//需要调用loading的时候调用
loading.close();
}

//请求拦截
axios.interceptors.request.use(config =>{
//加载动画时候判断localStorage是否存在
startLoading();
if(localStorage.eleToken){
//设置统一的请求header
config.headers.Authorization =localStorage.eleToken
}
return config;
},
error =>{
return Promise.reject(error);
}
);

//响应拦截
axios.interceptors.response.use(response =>{
//结束加载动画
endLoading();
return response;

},
error =>{
endLoading();
Message.error(error.response.data);
//获取错误状态码
const {status} =error.response;
//401代表token失效
if(status==401){
Message.error("token失效,请重新登陆");
//清除token
localStorage.removeItem('eleToken');
//重新跳转到登陆页面
router.push('/login');
}

  return Promise.reject(error);

});

export default axios;

你可能感兴趣的:(vue请求拦截和响应拦截)