使用vue-resource與vue-cookie實現頁面登入，資料儲存與後臺的資料互動

後端互動對vue中contentType，和ajax的contentType區別對待

this.$http
        .post(netUrl, change, {
          headers: {
            Authorization: "Bearer " + this.$cookies.get("token")
          }
        })
        .then(
          response => {
            console.log(response.data);
            if (response.data != null) {
            }
          },
          response => {
            console.log("error");
          }
        );
 

當伺服器端需要設定contentType:“application/json”：

如果採用的是傳統的$.ajax方式進行互動時設定contentType:"application/json;charset=UTF-8"也會導致伺服器訪問不成功必須嚴格設定為contentType:“application/json”；

當使用vue中的vue-resource方式互動時，即使不設定contentType:"application/json"也可成功互動；

為什麼ajax要求那麼嚴格，原因還不是很清楚；
但是我們可以通過以上方式：每個http請求中加入以下程式碼，進行設定請求頭

 headers: {
    Authorization: "Bearer " + this.$cookies.get("token")
  }
 

全域性設定請求頭

雖然上述方式可以成功的設定請求頭，但是每個請求都設定顯得繁瑣，而從網上查詢解決方案始終沒有成功解決
解決問題的主要思路：

1.使得請求頭中存在token

網上提供方式：

Vue.http.interceptors.push((request, next) => {
      // ...
      // 請求傳送前的處理邏輯
     request.beforeSend = function() {
             request.headers['token'] = “token”;
     }
  next((response) => {
      // ...
      // 請求傳送後的處理邏輯
      // ...
      // 根據請求的狀態，response引數會返回給successCallback或errorCallback
      return response
  })

 

測試後發現用以上攔截器的方式不可行，查到網上有說可以嘗試

request.headers.set('token', "Bearer ")

方式，但是測試後發現仍行不通，通過各種嘗試最後發現是去除request.beforeSend直接設定皆可以

Vue.http.interceptors.push((request, next) => {
  // 請求傳送前的處理邏輯
  request.headers.set('token', "Bearer ")
  next((response) => {
    // 請求傳送後的處理邏輯
    // 根據請求的狀態，response引數會返回給successCallback或errorCallback
    return response
  })
})

如何獲取真實的token,

因為全域性設定是在main.js中，而token是在登入後才儲存下來的能否獲取到真實值
1.確保你的token確實存在
2.正常程式中通過this.$cookies.get(“token”)可以獲取token的值，因為對vue的認知不夠深，不知道在入口檔案處如何獲取token值，通過多次測試獲取解決方案

import Vue from 'vue'
import VueCookies from 'vue-cookies'
Vue.use(VueCookies);
Vue.http.interceptors.push((request, next) => {
  // 請求傳送前的處理邏輯
  request.headers.set('Authorization', "Bearer " + VueCookies.get("token"))
  next((response) => {
    // 請求傳送後的處理邏輯
    // 根據請求的狀態，response引數會返回給successCallback或errorCallback
    return response
  })
})