/

如何強制在每個 Axios 請求中使用憑據

如何強制在每個 Axios 請求中使用憑據

我使用 Axios 與一個設定了 JWT 權杖的 API 進行交互。

該 API 在 cookie 中返回該令牌，我很快發現我需要在 Axios 選項中設置 withCredentials: true:

1
2
3
import axios from 'axios'

axios.post(API\_SERVER + '/login', { email, password }, { withCredentials: true })

否則，cookie 將不會被保存。

我還需要在我發出的每個其他請求中設置它，以將 JWT 權杖發送到服務器:

1
axios.get(API\_SERVER + '/todos', { withCredentials: true })

現在，對於少量請求，這是可行的，但對於許多請求，您可能希望使用一個通用的配置。

您可以使用 create() 方法來創建一個新的 Axios 實例，然後在您的請求中使用它:

1
2
3
4
5
6
7
import axios from 'axios'

const instance = axios.create({
 withCredentials: true
})

instance.get(API\_SERVER + '/todos')

通常還會添加一個 baseURL 屬性:

1
2
3
4
5
6
7
8
import axios from 'axios'

const instance = axios.create({
 withCredentials: true,
 baseURL: API\_SERVER
})

instance.get('todos')

在 React 中，我使用了 axios-hooks，若要設定 withCredentials，我使用了以下代碼:

1
2
3
4
5
6
7
8
9
10
11
import axios from 'axios'
import useAxios, { configure } from 'axios-hooks'

const instance = axios.create({
 withCredentials: true,
 baseURL: API\_SERVER,
})

configure({ instance })

const [{ data, loading, error }, refetch] = useAxios('todos')

tags: [“Axios”, “JWT”, “Axios-hooks”, “React”, “強制憑據”, “配置”]