2017-12-27 95 views
9

我已經創建了愛可信攔截器負責將令牌之前每個請求被髮送到我的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對象):

img

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

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

imgd

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

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

編輯!

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

+0

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

+0

你可以硬編碼的令牌,看看它的工作? –

+0

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

回答

3

我看着辦吧。

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

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