VUE的拦截器

简单来说 vue 的拦截器 分为 请求拦截器 和 响应拦截器两种，

使用场景的话就是： 每次都要在请求中加入，token 判断是否登录，如果vue系统中 所有的请求都加入token，比较麻烦，每次送出请求，不过vue给我们 提供了一种方法 ---- 拦截器

拦截器在平时的项目中是比较使用频繁的 可以说在一个项目中 必不可少的

接下来我们说一下 在vue项目中 axios 拦截器的分类

1.请求拦截器

请求拦截器的作用是在请求发送前进进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易

//request拦截器 添加一个请求拦截器  
axios.interceptors.request.use(function (config) {
	let token = window.localStorage.getItem("token")
	if (token) {
  	// 设置请求头
	 config.headers.common['Authorization'] = token
	}
	return config
}, function (error) {
	//如果请求出错在此执行某些操作
	return Promise.reject(error);
});

 

 2.响应拦截器

 响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效需要重新登录的时候，跳转到登录页面

 

// 添加一个响应拦截器
axios.interceptors.response.use(function (response) {
	//登录超时
	if(response.data.code==400){
		router.push('/')
	}
	return response;
}, function (error) {
	return Promise.reject(error);
});

 3.移除拦截器

var myInterceptor = axios .interceptors.request.use(function() {/*...*/});
axios.interceptors.request.eject(myInterceptor);

4.为axios 实例添加拦截器

var instance = axios.create();
instance.interceptors.request.use(function() {/*...*/});