Vue 全局 Axios 封装：自动刷新 Token，解决登录过期难题

在 Vue 项目中封装一个全局通用的 AJAX 请求函数，同时实现 Token 过期自动刷新，一般可以使用 Axios 进行封装，具体步骤如下：

---

第一步：安装 Axios

如果项目中未安装 axios，先安装它：

npm install axios

---

第二步：创建 Axios 实例

在 utils/request.js 中封装请求实例：

import axios from 'axios';

// 创建 Axios 实例
const service = axios.create({
  baseURL: 'https://api.example.com', // 你的API基础路径
  timeout: 10000, // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('access_token'); // 从本地存储获取 Token
    if (token) {
      config.headers.Authorization = `Bearer ${token}`; // 在请求头中携带 Token
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }