Vue添加Token到请求头: Axios实战指南

在使用Vue构建需要用户身份验证的应用时，将token添加到请求头是至关重要的。本文将介绍如何使用Axios库在Vue应用中轻松实现这一目标。

为了避免在每次请求时都手动添加token，我们可以利用Axios的defaults.headers属性设置全局请求头。javascript// 导入Vue和Axiosimport Vue from 'vue';import axios from 'axios';

// 假设你已经从localStorage或Vuex中获取了tokenconst token = localStorage.getItem('token');

// 设置全局的请求头axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;

// 创建Vue实例new Vue({ // ... 组件和其他配置项});

在上面的代码中：

我们首先从localStorage (或任何你存储token的地方) 中获取token。- 然后，我们使用 axios.defaults.headers.common['Authorization'] 将 'Authorization' 请求头设置为 'Bearer ' + token。 'Authorization' 是常用的身份验证请求头字段，通常使用Bearer token格式。

设置全局请求头后，所有使用Axios发送的请求都将自动包含token。以下是一些示例：

**GET 请求:**javascriptaxios.get('/api/data') .then(response => { // 处理响应数据 }) .catch(error => { // 处理错误 });

**POST 请求:**javascriptaxios.post('/api/data', { // ... 请求体数据 }) .then(response => { // 处理响应数据 }) .catch(error => { // 处理错误 });

PUT 和 DELETE 请求:

类似地，你可以使用 axios.put() 和 axios.delete() 发送PUT和DELETE请求，token会自动包含在请求头中。

通过上述步骤，你可以在Vue应用中轻松地使用Axios将token添加到请求头。这将确保你的API请求得到正确的身份验证，并保护你的应用数据安全。