如何將axios header中的數據獲取到Vue中的一個組件

Question

我有一個 axios apiClient ，我正在嘗試將存儲在localStorage中的 email 放入 header 中。 在我的組件中，我嘗試使用

response.headers['email']

並將其分配給 email 變量，但我沒有定義。 我在localStorage中獲取 email 但無法在組件中獲取它。 任何幫助將不勝感激。

Axios

const apiClient = axios.create({
  baseURL: `${API}`,
  withCredentials: false,
  headers: {
     Accept: "application/json",
             "Content-Type": "application/json"
    }
});

apiClient.interceptors.request.use(function (config) {
  let token = JSON.parse(localStorage.getItem('token'));
  let email = JSON.parse(localStorage.getItem('email'));
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
    config.headers.email = `${email}`;
  }
  return config;
}, function (err) {
  return Promise.reject(err);
});

這是我的組件中需要 email 數據的方法

methods: {
  getOrders(){
    service.getAllOrders()
    .then(response => {
      this.email = response.headers['email'];
      console.log("email:", this.email)
    })
  }
}

getAllOrders()執行 axios get 。

Answer 1

您設置了請求攔截器，但您正在檢查響應header，這是兩個不同的對象。 響應來自服務器，不受請求攔截器的影響。

您可以為響應創建不同的攔截器：

apiClient.interceptors.response.use((response) => {
    response.headers.email = JSON.parse(localStorage.getItem('email'));
    return response;
});