axios封装请求头

在Vue中使用axios发送请求时，可以通过设置请求头来携带token。具体步骤如下：

1. 在发送请求前，先获取token值。

2. 在axios的请求拦截器中，设置请求头，将token值添加到请求头中。

3. 在后端接收请求时，需要验证token的有效性，以确保请求的安全性。

示例代码如下：

// 获取token值
const token = localStorage.getItem('token');

// 设置axios的请求拦截器
axios.interceptors.request.use(config => {
  // 将token添加到请求头中
  config.headers.Authorization = `Bearer ${token}`;
  return config;
});

// 发送请求
axios.get('/api/user').then(res => {
  console.log(res.data);
}).catch(err => {
  console.log(err);
});

在上面的示例中，我们通过localStorage获取了token值，并将其添加到请求头中。在后端接收请求时，需要验证token的有效性，以确保请求的安全性。

相关问题

axios封装添加请求头

好的，关于axios封装添加请求头，下面是一个简单示例：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'Custom-Header': 'foobar'}
});

instance.get('/user', {
  headers: {
    'Authorization': 'Bearer ' + getToken()
  }
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

在这个示例中，我们使用`axios.create`创建了一个实例，并定义了一些默认配置。然后，在发送请求时，我们可以在options中添加一个headers参数来设置请求头，如上例中的`Authorization`字段。

希望这个示例能对你有所帮助！

vue axios 封装请求

Vue中使用Axios发送HTTP请求的常用方式是将Axios封装成Vue插件。

以下是一个简单的Vue Axios封装请求示例：

1. 首先，安装Axios依赖

npm install axios --save

2. 创建一个名为`http.js`的文件，在其中封装Axios并导出

import axios from 'axios'

const http = axios.create({
  baseURL: 'http://localhost:3000/' // 设置请求地址的公共部分
})

// 请求拦截器
http.interceptors.request.use(config => {
  // 可以在请求发送前添加token等信息
  return config
}, error => {
  return Promise.reject(error)
})

// 响应拦截器
http.interceptors.response.use(response => {
  // 可以对响应结果进行统一处理
  return response.data
}, error => {
  return Promise.reject(error)
})

export default http

3. 将Axios封装成Vue插件，在`main.js`中引入并使用

import Vue from 'vue'
import http from './http'

Vue.prototype.$http = http

4. 在组件中使用

export default {
  methods: {
    fetchData() {
      this.$http.get('/api/data').then(res => {
        console.log(res)
      }).catch(error => {
        console.log(error)
      })
    }
  }
}

以上就是一个简单的Vue Axios封装请求的示例。通过封装可以使HTTP请求的配置、拦截器等逻辑集中处理，方便进行统一管理和维护。