使用 Axios 设置请求 Token
在前端开发中，我们经常需要与后端进行数据交互。而在进行数据传输时，很多时候需要进行身份验证，以确保数据的安全性。一种常见的身份验证方式就是使用 Token。Token 是一种可以在请求头中携带的身份验证信息，用来识别用户的身份和权限。
什么是 Axios？
Axios 是一个基于 Promise 的 HTTP 客户端，可以用在浏览器和 Node.js 环境中。它具有以下特点：
- 在浏览器中发送异步请求
- 支持 Promise API
- 支持拦截请求和响应
- 转换请求和响应数据
- 自动转换 JSON 数据
- 取消请求
- 自动设置 CSRF Token
在本文中，我们将介绍如何使用 Axios 设置请求 Token。
设置请求 Token
假设我们已经通过登录接口获取了一个 Token，现在我们需要在每个请求中都携带这个 Token。这时就可以使用 Axios 的拦截器功能来实现。
首先，我们需要在每个请求的请求头中添加 Token。我们可以使用 Axios 的 interceptors 来实现这一功能。下面是一个示例代码：
// 引入 Axios
const axios = require('axios');
// 创建 Axios 实例
const instance = axios.create({
baseURL: '
timeout: 5000,
});
// 添加请求拦截器
instance.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 实例，并在其请求拦截器中添加了一个函数。这个函数会在每个请求发送之前执行，我们可以在这里获取 Token 并设置到请求头中。
饼状图示例
下面是一个简单的饼状图示例，使用 mermaid 语法中的 pie 来表示：
pie
title 饼状图示例
"A": 30
"B": 25
"C": 20
"D": 15
"E": 10
发送带 Token 的请求
现在，我们已经设置了请求拦截器，会在每个请求中携带 Token。下面是一个发送请求的示例代码：
// 发送 GET 请求
instance.get('/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
// 发送 POST 请求
instance.post('/data', {
data: 'example'
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
在上面的代码中，我们使用 Axios 实例 instance 发送了 GET 和 POST 请求。由于我们在请求拦截器中设置了 Token，所以这些请求会自动携带 Token。
结语
通过以上示例，我们介绍了如何使用 Axios 设置请求 Token。通过拦截器的方式，我们可以在每个请求中都携带 Token，从而实现身份验证和数据安全。希望本文对你有所帮助！如果有任何疑问，欢迎留言讨论。
