vue+vue-resource設置請求頭(帶上token)

前言

　　有這樣的一個需求，后台服務器要求把token放在請求頭里面

　　嗯一般是通過data里面通過參數帶過去的

第一種方法

　　全局改變：

　　Vue.http.headers.common['token'] = store.state.token;

　　之前是吧token剛在data里面的

　　是我封裝的一個get 請求，親測有用。現在我們項目就是用的這一種

      

　　然后放一個請求成功的實例

　　首先會先發一個 OPTIONS 預請求

　　

　　然后發出正式請求

　　

 

第二種方法：

　　不能局限於一種方法嘛！

　　第二種方法是：在Vue實例中設置

var vm = new Vue({
  el:'#app',
  data:{
   showList: true,
   title: null
  },
  http: {
    root: '/',
    headers: {
      token: token
    }
  }
})

 

第三種方法：在攔截器中設置  vue interceptors 設置請求頭

Vue.http.interceptors.push((request, next) => {
    request.headers.set('token', token); //setting request.headers
    next((response) => {
      return response
   })
})

 

還可以這樣

　　在在main.js添加過濾器

Vue.http.interceptors.push((request,next)=>{
 //request.credentials = true; // 接口每次請求會跨域攜帶cookie
 //request.method= 'POST'; // 請求方式（get,post）
 //request.headers.set('token','111') // 請求headers攜帶參數
 
 next(function(response){
  return response;
 
 });
})

 

Fannie總結

　　后面的方法要自己去實踐哦，我用的是第一種。

　　然后再次提醒一下，你們自家的服務器要支持這樣傳token哦~

　　不然會報個錯的，像下面這樣

Request header field token is not allowed by Access-Control-Allow-Headers in preflight response.

 　　拜拜了。