在Vue中如何将token添加到axios请求中
在Vue项目中，我们通常使用axios来进行网络请求。在许多情况下，我们需要在请求头中添加token，以便服务器可以验证用户的身份。下面将介绍如何在Vue中将token添加到axios请求中。
步骤
1. 安装axios
首先需要安装axios，可以使用npm或者yarn进行安装。
npm install axios
2. 创建axios实例
在项目中创建一个axios实例，并配置请求拦截器，以便在每个请求中添加token。
// src/utils/request.js
import axios from 'axios';
const instance = axios.create({
baseURL: '
});
instance.interceptors.request.use(
config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
error => {
return Promise.reject(error);
}
);
export default instance;
3. 使用axios实例进行请求
在需要发送网络请求的地方，引入axios实例并发送请求。
// src/views/Home.vue
import request from '@/utils/request';
export default {
mounted() {
request.get('/user')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
}
}
类图
classDiagram
class axios {
baseURL: string
interceptors: object
create()
}
class request {
get()
post()
put()
delete()
}
class Home {
mounted()
}
axios <|-- request
request --> Home
甘特图
gantt
title Adding token to axios request
section Setup
安装axios: done, 2022-01-01, 1d
创建axios实例: done, 2022-01-02, 1d
使用axios实例进行请求: done, 2022-01-03, 1d
通过以上步骤，我们可以很方便地在Vue项目中将token添加到axios请求中。这样就可以确保每次请求都携带了正确的身份验证信息，保护用户的数据安全。
希望以上内容能够帮助到你，如果有任何疑问或者更多的需求，欢迎继续探讨。祝你编程愉快！
