在axios中怎样添加授权验证？

在 Axios 中添加授权验证有多种方式，取决于你的后端使用的授权机制（例如，Bearer Tokens, Basic Auth, API Keys 等）。以下是一些常见方法：

1. 使用 headers 添加 Authorization 头： 这是最常用的方法，特别是对于 Bearer Tokens。

import axios from 'axios';

const token = localStorage.getItem('token'); // 获取存储的 token

axios.get('/api/user', {
  headers: {
    Authorization: `Bearer ${token}`, // 在 Authorization header 中添加 Bearer token
  }
})
.then(response => {
  // 处理响应
})
.catch(error => {
  // 处理错误
});


//  或者，创建一个 Axios 实例以全局配置授权头：

const apiClient = axios.create({
  baseURL: '/api',
  headers: {
    Authorization: `Bearer ${token}`
  }
});

apiClient.get('/user')
.then(response => {
  // 处理响应
})
.catch(error => {
  // 处理错误
});

//  更灵活的方式，允许在每个请求中覆盖全局配置:
const apiClient = axios.create({
  baseURL: '/api',
});

apiClient.get('/user', {
    headers: {
        Authorization: `Bearer ${localStorage.getItem('token')}`, // 每次请求时动态获取token
    }
})

2. 使用 auth 参数 (适用于 Basic Auth):

axios.get('/api/user', {
  auth: {
    username: 'your_username',
    password: 'your_password'
  }
})
.then(response => {
  // 处理响应
})
.catch(error => {
  // 处理错误
});

3. 使用请求拦截器 (interceptors)： 拦截器可以在请求发送前修改请求配置，例如添加授权头。这对于需要在多个请求中添加相同授权信息的情况非常有用。

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, function (error) {
  // 处理请求错误
  return Promise.reject(error);
});


//  更灵活的请求拦截器，允许根据不同请求添加不同的授权信息：
axios.interceptors.request.use(config => {
    if (config.url === '/api/special_resource') {
        config.headers.Authorization = `ApiKey ${localStorage.getItem('apiKey')}`;
    } else {
        config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
    }
    return config;
}, error => Promise.reject(error));

4. 使用 params (适用于 API Keys): 如果你的 API 使用 API Key 通过查询参数进行身份验证，你可以直接在 URL 中或使用 params 选项添加它。

// 直接在 URL 中添加
axios.get('/api/user?api_key=YOUR_API_KEY')

// 使用 params 选项
axios.get('/api/user', {
  params: {
    api_key: 'YOUR_API_KEY'
  }
})

选择哪种方法取决于你的后端 API 的授权机制。 请查阅你的后端 API 文档，了解正确的授权方法和所需的参数。

刷新 Token 的处理:

如果你的应用使用需要定期刷新的 token，你可以在响应拦截器中处理 token 过期的情况：

axios.interceptors.response.use(
  response => response,
  error => {
    const originalRequest = error.config;
    if (error.response.status === 401 && !originalRequest._retry) { // 检查是否为 401 错误且未重试
      originalRequest._retry = true; // 标记已重试
      return refreshToken().then(newToken => { // 调用刷新 token 的函数
        axios.defaults.headers.common['Authorization'] = 'Bearer ' + newToken; // 更新 token
        originalRequest.headers['Authorization'] = 'Bearer ' + newToken; // 更新原始请求的 token
        return axios(originalRequest); // 重新发送请求
      });
    }
    return Promise.reject(error);
  }
);

//  refreshToken 函数示例 (你需要根据你的后端 API 实现具体的逻辑)
async function refreshToken() {
    const refreshToken = localStorage.getItem('refreshToken');