vue如何获取header里面的值

在Vue中，可以通过this.$http.headers获取header的值。

Vue.js 是一个用于构建用户界面的渐进式框架，在前端开发中，我们经常需要获取 header 里面的值，token、user-id 等，本文将介绍如何在 Vue.js 中获取 header 里面的值。

1. 基本概念

在 HTTP 请求中，header 是包含有关请求或响应的元数据的信息，当我们向服务器发送一个登录请求时，服务器可能会返回一个包含 token 的 header，我们需要在 Vue.js 中获取这个 token，以便在后续的请求中使用它。

2. 使用 axios 获取 header 里面的值

axios 是一个基于 Promise 的 HTTP 库，可以用于浏览器和 Node.js，在 Vue.js 项目中，我们可以使用 axios 来发送 HTTP 请求，当请求成功时，我们可以从响应对象中获取 header 的值。

确保已经安装了 axios：

npm install axios

在 Vue.js 项目中引入 axios：

import axios from 'axios';

接下来，我们可以使用 axios 发送一个请求，并在请求成功后获取 header 的值：

axios.get('https://api.example.com/data')
  .then(response => {
    const token = response.headers['token']; // 获取 token
    console.log('Token:', token);
  })
  .catch(error => {
    console.error('Error:', error);
  });

3. 使用 fetch API 获取 header 里面的值

除了使用 axios，我们还可以使用原生的 fetch API 来发送 HTTP 请求，fetch API 返回一个 Promise，我们可以使用它来处理请求的结果，同样，我们可以从响应对象中获取 header 的值。

确保已经安装了 axios：

npm install axios

在 Vue.js 项目中引入 axios：

import axios from 'axios';

接下来，我们可以使用 fetch API 发送一个请求，并在请求成功后获取 header 的值：

fetch('https://api.example.com/data')
  .then(response => {
    const token = response.headers.get('token'); // 获取 token
    console.log('Token:', token);
  })
  .catch(error => {
    console.error('Error:', error);
  });

4. 使用 interceptors（拦截器）获取 header 里面的值

为了更方便地获取 header 的值，我们可以使用 axios 的 interceptors（拦截器），拦截器可以在请求或响应被处理之前执行一些操作，我们可以在拦截器中获取 header 的值，并将其存储在全局变量中，这样，我们就可以在项目的任何地方访问这些值。

安装 axios：

npm install axios

在 Vue.js 项目中引入 axios：

import axios from 'axios';

接下来，创建一个 axios instance：

const instance = axios.create();

现在，我们可以创建一个拦截器来获取 header 的值：

instance.interceptors.request.use(config => {
  const token = config.headers['token']; // 获取 token
  if (token) {
    config.headers['Authorization'] = Bearer ${token}; // 如果存在 token，将其添加到请求头中
  } else {
    delete config.headers['Authorization']; // 如果不存在 token，删除请求头中的 Authorizaion
  }
  return config; // 返回修改后的 config
}, error => {
  return Promise.reject(error); // 如果请求失败，返回错误信息
});

我们可以使用这个实例来发送请求：

instance.get('https://api.example.com/data')
  .then(response => {
    console.log('Data:', response.data); // 输出数据内容
    console.log('Headers:', response.headers); // 输出响应头信息，包括 token（如果存在）
  })
  .catch(error => {
    console.error('Error:', error); // 如果请求失败，输出错误信息
  });