axios拦截器：每次请求自动带上 token

周盛欢2024-04-09 20:49

Step 1：创建Axios实例并添加拦截器

在你的Vue项目中，一般我们会先导入axios，然后创建一个axios实例。这样做是为了方便统一管理和配置。

import axios from 'axios'; // 引入axios

// 创建一个axios实例
const service = axios.create();

// 添加请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做点事情
    let token = window.sessionStorage.getItem('token'); // 从sessionStorage获取Token
    if (token) { // 如果Token存在
      config.headers.Authorization = `Bearer ${token}`; // 将Token添加到请求头中，这里假设Token的格式是Bearer + Token值
    }
    return config; // 返回配置对象，继续发送请求
  },
  error => {
    // 对请求错误做点事情
    return Promise.reject(error);
  }
);

上面的代码做了什么呢？

我们创建了一个axios实例service，相当于有了一个专属邮差。
给这个邮差设置了规则：每次出门送信前，先检查一下有没有会员卡（Token）。
如果找到了会员卡（从sessionStorage中获取Token），就把会员卡号（Token值）写在信封上（添加到请求头Authorization字段）。
即使遇到请求错误，也会及时通知我们。

Step 2：全局使用带有拦截器的Axios实例

为了让Vue组件中的所有请求都能自动带上Token，我们将这个设置了拦截器的axios实例挂载到Vue的原型上：

// 将axios实例绑定到Vue原型上，这样在所有Vue组件中都可以通过this.$http访问到
Vue.prototype.$http = service;

现在，每当在Vue组件中发起请求时，只需要调用this. $http.get、this.$ http.post等方法，请求头就会自动带上从sessionStorage获取到的Token了。