如何在 Axios 存取使用 Basic Auth 的 API ? | 點燈坊

某些採用 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 提供帳號與密碼