axios踩坑笔记

axios踩坑之请求拦截器

1.问题与解决方法

​ 近日在使用vuecli进行前端开发时，后端返回的token每次请求后都会改变，遇到了刷新页面时出现请求失败401的问题，太过相信axios，找了好几天才发现，不知何种原因，axios的请求拦截器对于在vue页面的created方法中的请求并没有执行拦截处理，所以请求头没有权限信息，因而返回401 ！！！

解决方法：

1.在页面的created方法设置请求头Authorization参数（麻烦，不推荐）

2.在响应拦截器设置请求头Authorization参数

2.代码部分

以下为有问题的代码

vue部分

created: function () {
      this.getData();
      
    },
    methods:{
      //获取数据到页面的表格 
      getData(){
          //设置页码
        var send =this.pos.start;
      this.$http.get('/task/listUnacceptedTask/'+send)
      .then(response => {
           console.log(response.data);
              this.tableData = JSON.parse(JSON.stringify(response.data));
            });
          //获取分页部分
        this.getPage();
      }
    }

axios拦截器部分

import axios from 'axios'
import router from './router'

export default()=>{

   axios.defaults.baseURL = 'baseURL'; // 配置axios请求的地址
   axios.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8';
   axios.defaults.crossDomain = true;  //设置cross跨域 
  
 
   //配置发送请求前的拦截器 可以设置token信息 
   axios.interceptors.request.use(config => {
       var token = localStorage.getItem('token');
       axios.defaults.headers.common['Authorization'] = token;
           return config;
       }, error => {
           loadingInstance.close();
           return Promise.reject(error);
       });
// 配置响应拦截器 
   axios.interceptors.response.use(res => {
       //对响应数据做些事
       console.log(res.status);  
       const authorization = res.headers.authorization;
       localStorage.setItem('token',authorization);
       console.log(authorization);
       if(typeof(localStorage.getItem('token'))!=undefined&&typeof(localStorage.getItem('token'))!=null)
       localStorage.setItem('islogin',1);
       
    return Promise.resolve(res);
      
   	},
   	error => {
       if(error.response.status=="401"){
        localStorage.setItem('token',null);
        localStorage.setItem('islogin',0);
        //全局登陆过滤，当判读token失效或者没有登录时 返回登陆页面
        router.push('/');
        return false;
    };
   	  alert('请求失败，请稍后重试！')
   	  return Promise.reject(error)
   	}
   		
   	);

   return axios;
    }

使用方法二处理

axios拦截器部分

import axios from 'axios'
import router from './router'

export default()=>{

   axios.defaults.baseURL = 'baseURL'; // 配置axios请求的地址
   axios.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8';
   axios.defaults.crossDomain = true;  //设置cross跨域 
  
 
   //配置发送请求前的拦截器 可以设置token信息 
   axios.interceptors.request.use(config => {
       
           return config;
       }, error => {
           loadingInstance.close();
           return Promise.reject(error);
       });
// 配置响应拦截器 
   axios.interceptors.response.use(res => {
       //对响应数据做些事
       console.log(res.status);  
       const authorization = res.headers.authorization;
       axios.defaults.headers.common['Authorization'] = authorization;
       console.log(authorization);
       if(typeof(localStorage.getItem('token'))!=undefined&&typeof(localStorage.getItem('token'))!=null)
       localStorage.setItem('islogin',1);
       
    return Promise.resolve(res);
      
   	},
   	error => {
       if(error.response.status=="401"){
        localStorage.setItem('token',null);
        localStorage.setItem('islogin',0);
        //全局登陆过滤，当判读token失效或者没有登录时 返回登陆页面
        router.push('/');
        return false;
    };
   	  alert('请求失败，请稍后重试！')
   	  return Promise.reject(error)
   	}
   		
   	);

   return axios;
    }

最后：以上仅代表个人见解，如果有错误欢迎各位大佬指正

当然，作为一个自学了1个多月前端的小白，如果代码有什么错误也欢迎各位指出

附录：

1.前端解决浏览器跨域请求问题：https://www.cnblogs.com/ysx215/p/11446615.html

2.http自定义请求头的获取：https://segmentfault.com/a/1190000009125333