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