VueJS中Axios每次请求新建实例是否正确？如何用单实例动态配置token？

首先注意你当前代码存在笔误：导出的函数名为apiRequestProtocol，但组件导入的是apiRequireProtocol，建议先修正避免调用报错。

单Axios实例动态配置Token的实现 #

你之前复用单实例失败的核心原因是没有在拦截层实现请求维度的动态判断，可按照如下方案改造api.js：

import axios from "axios";
import store from "@/store"; // 导入你的Vuex实例
import router from "@/router"; // 导入路由实例（可选，用于鉴权失败跳转）

// 全局唯一Axios实例，仅初始化1次
const apiInstance = axios.create({
  baseURL: process.env.VUE_APP_API_BASEURL || "http://127.0.0.1:8000/api/",
});

// 全局请求拦截器：动态判断是否添加鉴权头
apiInstance.interceptors.request.use(
  (config) => {
    // 仅当请求标记需要鉴权、且Vuex中存在有效token时才添加Authorization头
    if (config.requiresAuth && store.state.access_token) {
      config.headers.Authorization = `Bearer ${store.state.access_token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// 全局响应拦截器：统一处理异常（可选，推荐添加）
apiInstance.interceptors.response.use(
  (response) => response.data, // 直接返回响应体数据，减少组件冗余代码
  (error) => {
    // 鉴权失效时自动清空token并跳转到登录页
    if (error.response?.status === 401) {
      store.commit("clearToken"); // 替换为你Vuex中清空token的mutation名
      router.push("/login");
    }
    return Promise.reject(error);
  }
);

// 封装通用请求方法对外暴露
export const get = (url, config = {}) => apiInstance.get(url, config);
export const post = (url, data, config = {}) => apiInstance.post(url, data, config);
export const put = (url, data, config = {}) => apiInstance.put(url, data, config);
export const del = (url, config = {}) => apiInstance.delete(url, config);

export default apiInstance;

组件调用方式如下：

• 无需携带token的公开接口：get('/public/article/list')
• 需要携带token的私有接口：get('/user/profile', { requiresAuth: true })

Axios实例是否需要手动删除 #

无需手动删除。Axios实例本质是普通JavaScript对象，未绑定任何系统级资源或DOM节点，当没有变量引用该实例时，JS引擎的垃圾回收机制会自动清理对应内存。你之前每次调用创建新实例的写法不会造成内存泄漏，仅会产生冗余对象，属于不必要的性能开销。

更优实现方案建议 #

• 接口地址统一管理：建议单独封装一个apiList.js文件存储所有接口路径，避免组件中硬编码接口地址，后续迭代修改时只需改动一处。
• 环境变量区分配置：将baseURL、请求超时时间等配置放在.env环境变量文件中，开发、测试、生产环境切换时无需修改核心代码。
• 权限校验前置：可以结合路由守卫判断页面是否需要登录，提前拦截未登录用户访问私有页面，不用等接口返回401再处理。

内容的提问来源于stack exchange，提问作者Angelo Schuler Piletti