axios header 添加token

原创

mob649e8159b30b 2024-01-11 10:40:08 ©著作权

文章标签 ios 拦截器 javascript 文章分类 iOS 移动开发

©著作权归作者所有：来自51CTO博客作者mob649e8159b30b的原创作品，请联系作者获取转载授权，否则将追究法律责任

如何给axios添加token的header

概述

在前端开发中，我们经常会使用axios来进行网络请求。有时候我们需要在请求的header中添加token，以实现身份验证和授权功能。本文将介绍如何使用axios给header添加token。

步骤

首先，让我们来看一下整个流程的步骤：

步骤	动作
1	创建axios实例
2	设置请求拦截器
3	在请求拦截器中添加token到header
4	发起请求

接下来，让我们逐步详细介绍每一步需要做什么，以及相应的代码。

创建axios实例

首先，我们需要创建一个axios实例，以便统一管理我们的请求。可以在项目的某个配置文件中创建一个axios实例，并通过导出的方式进行引用。

import axios from 'axios';

const instance = axios.create({
  baseURL: ' // 设置请求的基础URL
  timeout: 5000, // 设置超时时间
});

export default instance;

在上面的代码中，我们使用axios的create方法创建了一个实例，并设置了基础URL和超时时间。你可以根据自己的需求进行修改。

设置请求拦截器

接下来，我们需要设置请求拦截器。请求拦截器会在每次请求发送之前执行，并可以进行一些操作，例如添加header。

import axios from './axios';

axios.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么，例如添加header
    const token = localStorage.getItem('token'); // 获取token
    config.headers.Authorization = `Bearer ${token}`; // 在header中添加token
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

在上面的代码中，我们使用了axios的interceptors来设置请求拦截器。在拦截器中，我们可以获取存储在localStorage中的token，并将其添加到header的Authorization字段中。

发起请求

现在，我们已经完成了设置。可以使用axios来发起请求了。以下是一个简单的示例：

import axios from './axios';

axios.get('/api/data')
  .then(response => {
    // 处理成功响应结果
    console.log(response.data);
  })
  .catch(error => {
    // 处理错误响应结果
    console.error(error);
  });

在上面的代码中，我们使用axios的get方法来发送一个GET请求，并指定了请求的URL。你可以根据需求来选择不同的请求方法，例如post、put等。