愛可信攔截的令牌頭出現在配置而不是在請求頭

我已經創建了愛可信攔截器負責將令牌之前每個請求被髮送到我的REST API。愛可信攔截的令牌頭出現在配置而不是在請求頭

import axios from 'axios'; 
import { store } from '../store/store'; 

export default function execute() { 
    axios.interceptors.request.use(function(config) { 
     const token = store.state.token; 
     if(token) { 
      config.headers.Authorization = `Bearer ${token}`; 
      console.log(config); 
      return config; 
     } else { 
      console.log('There is not token yet...'); 
      return config; 
     } 
    }, function(err) { 
     return Promise.reject(err); 
    }); 
}

正如你在第2行，我進口vuex存儲看到，這實際上是地方我的令牌沉積。在第8行中，我實際上將此令牌添加到config對象，然後在接下來的一行中我將它安慰出來。

它在我main.js執行文件，就像這樣：

import interceptor from './helpers/httpInterceptor.js'; 
interceptor();

令牌出現在配置對象，我在控制檯中看到（因爲我安慰config對象）：

它每次運行時都會按照預期的方式發出一些API請求。如果令牌存在（登錄後）它應該爲每個請求添加令牌頭。不幸的是，它不會添加它，儘管它存在於配置對象中，這使我有點困惑。

實際上它並不增加令牌真正的要求，我可以在網絡選項卡中顯示：

這張截圖是登錄後進行，當然這樣的標記已經在vuex儲存空間，並安慰我在執行註銷功能（這個叫rest API）之後配置了一部分（攔截器的一部分）。

在結果我有400（錯誤請求）狀態，從我休息API響應，因爲我沒有送令牌。

編輯！

我在想我能加入到這個問題，使之更好。我認爲這是不可能的，所以我決定創建一個repository演示，你可以下載並看到你的眼睛問題。我希望它能幫助解決問題！

來源

2017-12-27 BT101

我應該添加關於如何將令牌存儲到vuex存儲的信息嗎？我不知道這可能與我的問題有關。 – BT101

你可以硬編碼的令牌，看看它的工作？ –

不幸的是，它並沒有改變任何它仍然有相同的行爲，當我在攔截器中硬編碼令牌。 – BT101

我看着辦吧。

我不知道，有一些所謂的預檢要求其前實際請求REST API執行。如果預檢請求失敗，它將不接受/接收更多標題。這就是爲什麼我沒有看到它在鉻控制檯網絡選項卡上的實際請求，但它是在攔截器中的console.log ed配置對象。

在庫演示這是調用不存在的URL相同的，所以預檢請求失敗，有作爲。在創建這個演示時，我不知道是否存在預檢請求這樣的事情，所以我確信，如果我打電話給一些現有的URL端點或虛構的請求並不重要，我認爲這兩種方式我都應該能夠看到請求標題在那裏。

來源

2018-01-01 00:28:53 BT101

愛可信攔截的令牌頭出現在配置而不是在請求頭

回答

相關問題