How to pass Header JWT Token with Axios in React?

当使用 React 与 Axios 在发起请求时携带 JWT Token，通常有几种方法来实现。一种常见的做法是在请求的时候将 Token 添加到请求的 Header 中。以下是具体的步骤和代码实例：

步骤 1: 安装 Axios

如果还没有安装 Axios，首先需要通过 npm 或 yarn 来安装它：

bash
npm install axios

或者

bash
yarn add axios

步骤 2: 创建 Axios 实例并配置默认 Header

我们可以创建一个 Axios 实例，并为这个实例设置默认的配置，比如 API 的基地址（baseURL）和 Headers。这样做的好处是，每次发起请求时就不需要重复设置 Token。

javascript
import axios from 'axios';

const API = axios.create({
    baseURL: 'https://api.example.com/',
    headers: {
        'Content-Type': 'application/json'
    }
});

const token = 'your_jwt_token';
if (token) {
    API.defaults.headers.common['Authorization'] = `Bearer ${token}`;
}

步骤 3: 使用这个 Axios 实例发起请求

现在，每次使用这个 Axios 实例发起请求时，JWT Token 将自动包含在 HTTP 请求的 Authorization 头中。

javascript
API.get('/endpoint')
    .then(response => {
        console.log('Data:', response.data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

步骤 4: 刷新 Token

在一些应用场景中，JWT Token 可能会过期。我们可以通过 Axios 的拦截器来处理 Token 过期的情况，例如自动刷新 Token 并重新发送请求。

javascript
API.interceptors.response.use(
    response => response,
    error => {
        const originalRequest = error.config;
        if (error.response.status === 401 && !originalRequest._retry) {
            originalRequest._retry = true;
            // 假设有一个函数可以刷新 token
            return refreshToken().then(res => {
                if (res.status === 200) {
                    API.defaults.headers.common['Authorization'] = `Bearer ${res.data.token}`;
                    return API(originalRequest);
                }
            });
        }
        return Promise.reject(error);
    }
);

示例总结

以上就是如何在 React 应用中使用 Axios 库并在请求时携带 JWT Token。通过设置 Axios 实例的默认配置，我们可以方便地管理和使用 HTTP 请求头，这对于维护大型应用尤其有帮助。同时，通过拦截器可以处理诸如 Token 刷新等复杂情况，使得应用的用户认证流程更加流畅。