vue-resource 在請求頭（headers）加上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.

 　　拜拜了。