如何使用axios在請求中攜帶token

一、什麼是axios

axios是一款基於Promise的HTTP客戶端，它可以在瀏覽器和Node.js中使用，支持請求和響應攔截，支持轉換請求和響應數據。axios可以替代fetch，擁有更加簡單易用和可擴展的API，並且在請求中添加headers、設置responseType等功能都非常易用，因此在日常開發中得到廣泛的應用。

二、為什麼需要在請求中攜帶token

在Web應用中，通常需要對用戶進行認證和授權，常見的認證方式是用戶提供賬號和密碼進行驗證，認證成功後會生成一個token用於標識當前用戶的身份，這個token通常會在後續的請求中帶上，以供後端進行認證和授權。因此，在使用axios進行請求時，通常需要攜帶token標識當前用戶。

三、如何在請求中攜帶token

1、在headers中設置Authorization

  
import axios from 'axios';

axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;

axios.post('/api/user', {
  firstName: 'John',
  lastName: 'Doe'
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  

在headers中設置Authorization欄位的值為’Bearer ‘ + token，其中token為當前用戶的token，這種方式比較常見，也比較通用，適用於大部分的API請求。需要注意的是，’Bearer ‘與token之間有一個空格。

2、在請求參數中攜帶token

  
import axios from 'axios';

axios.post('/api/user', {
  firstName: 'John',
  lastName: 'Doe',
  token: token
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  

在請求參數中添加token欄位，並將其值設置為當前用戶的token，這種方式雖然比較簡單，但是並不太安全，因為token很容易被截獲，如果使用不當，會導致安全問題。

3、使用axios攔截器添加token

  
import axios from 'axios';

axios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

axios.post('/api/user', {
  firstName: 'John',
  lastName: 'Doe'
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  

通過使用axios的攔截器，在發起請求時對請求進行處理，在請求頭中添加authorization欄位，這種方式比較簡單，而且適用於大部分的API請求。需要注意的是，在攔截器中添加authorization欄位時，’Bearer ‘與token之間有一個空格。

四、常見問題及解決方法

1、如何從LocalStorage中獲取token

在使用axios進行請求時，通常需要從LocalStorage中獲取token，可以通過以下方式獲取：

  
const token = localStorage.getItem('token');
  

2、如何在請求中攜帶其他的認證信息

在請求中除了需要攜帶token外，有時候還需要攜帶其他的認證信息（如賬號、密碼等），可以在headers中設置其他欄位的值，如下所示：

  
axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;
axios.defaults.headers.common['X-Auth-Username'] = 'user@example.com';
axios.defaults.headers.common['X-Auth-Password'] = 'password';
  

3、如何獲取HTTP響應狀態碼

在處理HTTP請求時，有時候需要獲取HTTP響應的狀態碼，可以通過axios的response對象的status屬性獲取，如下所示：

  
axios.post('/api/user', {
  firstName: 'John',
  lastName: 'Doe'
})
  .then(function (response) {
    console.log(response.status);
  })
  .catch(function (error) {
    console.log(error);
  });
  

總結

通過本文的介紹，我們了解了在使用axios進行請求時如何攜帶token。在實際項目開發中，我們需要根據具體情況選擇不同的方式，確保請求安全、可靠，並且符合後端的要求。