Vue 实现全局拦截所有请求并添加请求头 token 的方法

在 Vue 应用开发中，经常需要对所有的请求进行全局拦截，并添加请求头中的 token 以实现身份验证或其他特定的功能。下面将详细介绍如何实现这一功能。

我们需要使用 Vue 中的axios库来发送请求。axios是一个流行的 HTTP 请求库，提供了丰富的功能和便捷的接口。

在项目中安装axios：

npm install axios

接下来，创建一个请求拦截器。在 Vue 的main.js文件或其他合适的入口文件中，添加以下代码：

import axios from 'axios';

axios.interceptors.request.use(config => {
  // 获取 token
  const token = localStorage.getItem('token');
  if (token) {
    // 将 token 添加到请求头
    config.headers['Authorization'] = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

在上述代码中，通过axios.interceptors.request.use方法创建了一个请求拦截器。在拦截器中，先从本地存储中获取token的值。如果存在token，就将其添加到请求头的Authorization字段中，格式通常为Bearer <token>。

通过这样的全局拦截设置，所有通过axios发送的请求都会自动带上添加的token请求头，从而满足了业务需求。

需要注意的是，在实际应用中，要确保token的获取和存储方式是安全可靠的。并且，根据具体的项目需求，可能还需要对响应进行拦截处理，以处理各种可能的错误情况或进行统一的响应数据处理。

通过以上简单的几步，就可以在 Vue 应用中实现全局拦截所有请求并添加请求头token，为应用的安全性和功能性提供了有力的支持。