JS Day 49: 如何使用 axios 傳遞 token

AXIO GET Request

axios
  .get('http://www.abcd1234.com/api/users')
  .then( res => {
    console.log(res);
  })
  .catch( err => {
    console.log(err)
  })

一個 GET 請求可以這樣完成。

如果需要更多設定，例如回傳的格式、帳密驗證，就可以把需要設定的一些 key:value 寫在 config 裡面傳遞給 axios。

axios(url[, config])

const api = 'https://challenge.thef2e.com/api/thef2e2019/stage6/rooms';
const token = 'token_value';
const roomInfo = axios({
      method: 'GET',
      url: api,
      responseType: 'json', // responseType 也可以寫在 header 裡面
      headers: {
        // accept: 'application/json',
      },
        auth: {
        username: 'xiaoming',
        password: 'abc123'
      },
    })
    .then(function (response) {
  console.log(response);
    })
    .catch(function (error) {
      console.log('錯誤',error);
    });

這邊的 auth 是一個基本的 HTTP 驗證。它會生成一個 Authorization header 並覆蓋掉原有的。官方文件有特別說明，如果要傳遞 Bearer tokens 需要在 headers 裡頭自定義 Authorization。

// auth indicates that HTTP Basic auth should be used, and supplies credentials.
// This will set an Authorization header, overwriting any existing
// Authorization custom headers you have set using headers.
// Please note that only HTTP Basic auth is configurable through this parameter.
// For Bearer tokens and such, use Authorization custom headers instead.

這邊有更多的 request config 可以參考。

const api = 'https://challenge.thef2e.com/api/thef2e2019/stage6/rooms';
const token = 'token_value';
const roomInfo = axios({
      method: 'GET',
      url: api,
      responseType: 'json', // responseType 也可以寫在 header 裡面
      headers: {
            Authorization: `Bearer ${token}` // Bearer 跟 token 中間有一個空格
      }
    })
    .then(function (response) {
  console.log(response);
    })
    .catch(function (error) {
      console.log('錯誤',error);
    });

Reference:

• axios