詳解axios請求頭攜帶token

一、為什麼需要在請求頭中攜帶token？

在前後端分離的項目中，一般情況下需要使用token來驗證用戶的身份，並且防止未經授權的訪問。而在發送請求時，需要在請求頭中攜帶token信息，以便後端能夠對用戶的操作進行鑒權。如果沒有攜帶token，則可能會導致用戶無法進行正常操作或者進行了未被授權的操作。

二、如何攜帶token信息？

在使用axios發送請求時，可以通過設置請求頭的方式來攜帶token信息。可以使用axios的攔截器，在請求發送前統一設置請求頭信息。示例代碼如下：

// 設置請求攔截器
axios.interceptors.request.use((config) => {
  // 從本地存儲中獲取token信息
  const token = localStorage.getItem('token');
  // 如果存在token，則將token信息設置到請求頭中
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, (error) => {
  return Promise.reject(error);
});

在這段代碼中，我們使用axios的請求攔截器，在請求發送前使用localStorage獲取token信息，並將其設置到請求頭中，以保證後端能夠進行正確的鑒權。需要注意的是，實際項目中需要根據接口文檔來設置請求頭信息。

三、token的存儲位置

為了方便在不同的頁面中進行訪問，token需要進行存儲。常見的方法有兩種：使用cookie或者localStorage。

1、使用cookie存儲token

通過設置cookie來存儲token信息是一種常用的方法。使用cookie可以避免在不同的頁面中重複設置token信息，只需要從cookie中獲取即可。示例代碼如下：

// 存儲token信息到cookie中
document.cookie = `token=${token}`;
// 從cookie中獲取token信息
const token = document.cookie.replace(/(?:(?:^|.*;\s*)token\s*=\s*([^;]*).*$)|^.*$/, "$1");

使用cookie存儲token信息時，需要注意以下幾點：

1）需要設置cookie的過期時間來控制token的有效期；

2）需要設置cookie的secure屬性，以保證https協議下的安全性；

3）設置cookie的時候需要注意跨域的問題。

2、使用localStorage存儲token

使用localStorage來存儲token信息也是一種常見的方法。與cookie不同，localStorage存儲的信息不會隨着請求被發送到服務端，也不會像cookie一樣存在跨域的問題。示例代碼如下：

// 存儲token信息到localStorage中
localStorage.setItem('token', token);
// 從localStorage中獲取token信息
const token = localStorage.getItem('token');

使用localStorage存儲token信息時，需要注意以下幾點：

1）需要進行轉義處理，以防止攻擊者利用localStorage來進行XSS攻擊；

2）需要注意用戶使用隱身模式的情況下localStorage的使用問題；

四、token的刷新機制

在實際項目中，token是有一定的有效期的，為了保證用戶在有效期內能夠正常進行操作，需要對token進行定期刷新。我們可以通過定期發送刷新token的請求來更新用戶的token信息。示例代碼如下：

// 設置響應攔截器
axios.interceptors.response.use((response) => {
  // 如果token已經過期，則進行刷新token的請求
  if (response.data.code === 401) {
    // 刷新token請求
    return axios.post('/api/refreshToken', {
      token: localStorage.getItem('token')
    }).then((res) => {
      // 更新localStorage中的token信息
      localStorage.setItem('token', res.data.token);
      // 使用新的token重新發送請求
      response.config.headers.Authorization = `Bearer ${res.data.token}`;
      return axios(response.config);
    }).catch((err) => {
      // 刷新token失敗，跳轉到登錄頁
      location.href = '/login';
    });
  }
  return response;
}, (error) => {
  return Promise.reject(error);
});

在這段代碼中，我們使用axios的響應攔截器，在接收到響應後進行判斷，如果返回了401狀態碼，則說明當前的token已經過期，需要進行刷新token的操作。首先通過發送刷新token的請求來獲取新的token信息，然後將新的token信息存儲到localStorage中，並使用新的token重新發送之前的請求，以保證用戶操作的連續性。

五、小結

本文對axios請求頭攜帶token的問題進行了詳細的闡述。通過設置請求攔截器來統一設置請求頭信息，使用cookie或localStorage來存儲token信息，以及使用響應攔截器來進行定期刷新token的操作，以保證用戶操作的連續性，提高了項目的安全性。