點燈坊

學而時習之,不亦悅乎

如何在 Axios 存取使用 Basic Auth 的 API ?

Sam Xiao's Avatar 2019-06-14

某些採用 Basic Auth 的 API,必須在 Header 提供帳號密碼才能取取,這該如何在 Axios 使用呢 ?

Version

Vue 2.6.10
Axios 0.18.0

Get

import axios from 'axios';

const API = process.env.VUE_APP_API_INVENTORY;
const URI = process.env.VUE_APP_ALL_MACHINE;

export default args => axios.get(`${API}${URI}`, {
  args,
  auth: {
    username: 'admin',
    password: 'test'
  }
});

axios.get() 的第 2 個 argument 為 config object,除了傳入 params 外,尚提供 auth property,可傳入 object 提供帳號密碼。

Post

import axios from 'axios';

const API = process.env.VUE_APP_API_INVENTORY;
const URI = process.env.VUE_APP_ALL_MACHINE;

export default args => axios.post(`${API}${URI}`, {
  args, 
  auth: {
    username: 'admin',
    password: 'test'
  }
});

axios.post() 用法亦完全一樣。

Conclusion

  • 使用 Basic Auth 的 API,可在 Axios 的 config argument 的 auth property 提供帳號與密碼