使用 Vue3 + Axios 与 Spring Boot 高效对接（含 token 处理） | ZapcoMan's world

本文是「EduCore 教务系统实战系列」第 6 篇，介绍我如何在 Vue3 前端中封装 Axios，实现与 Spring Boot 后端的高效通信，重点处理好 JWT Token 传递、接口统一封装、异常处理、身份失效跳转等关键点。

---

🎯 通信机制设计目标

前后端分离架构中，通信稳定性决定系统使用体验。在 EduCore 中，我设定了以下通信设计目标：

• ✅ 所有请求统一封装（请求/响应拦截器）；
• ✅ 自动附带 JWT Token；
• ✅ 401/403 自动跳转登录页；
• ✅ 提供统一的消息提示 & 错误处理机制；
• ✅ 接口响应结构标准化处理；

---

🛠️ 技术栈说明

技术项	使用内容
前端框架	Vue3（Composition API）
网络库	Axios（封装为 request.js）
消息提示	Element Plus ElMessage
路由管理	Vue Router v4
状态管理	Pinia
后端框架	Spring Boot + JWT 鉴权

---

📦 接口数据结构设计

后端所有接口返回结构统一如下（Java 封装为 R.ok() / R.error()）：

{
  "code": 200,
  "msg": "成功",
  "data": {
    // 任意返回内容
  }
}

错误时：

{
  "code": 401,
  "msg": "未登录或已过期"
}

---

✅ Axios 封装核心代码（request.js）

import axios from 'axios';
import { ElMessage } from 'element-plus';
import router from '@/router';

const service = axios.create({
  baseURL: '/api',
  timeout: 5000
});

// 请求拦截器：附带 token
service.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) config.headers.Authorization = `Bearer ${token}`;
    return config;
  },
  error => Promise.reject(error)
);

// 响应拦截器：统一处理响应
service.interceptors.response.use(
  res => {
    if (res.data.code !== 200) {
      ElMessage.error(res.data.msg || '请求失败');
      return Promise.reject(res.data);
    }
    return res.data;
  },
  err => {
    if (err.response?.status === 401) {
      ElMessage.warning('登录已过期，请重新登录');
      localStorage.removeItem('token');
      router.push('/login');
    } else {
      ElMessage.error('网络异常或服务器错误');
    }
    return Promise.reject(err);
  }
);

export default service;

---

📡 接口调用方式标准化

示例：调用成绩列表接口

import request from '@/utils/request';

export function getScoreList(params) {
  return request.get('/score/list', { params });
}

页面中使用（推荐 async + try）

async function fetchData() {
  try {
    const res = await getScoreList();
    scoreList.value = res.data;
  } catch (err) {
    // 已全局处理，无需额外操作
  }
}

---

🔑 JWT Token 使用说明（前后端交互）

场景	前端操作	后端处理
登录成功	将 token 存入 localStorage	生成带角色的 JWT
请求接口	Axios 自动携带 Authorization	JwtFilter 解析 Token 获取用户身份
Token 失效	401 响应，跳转登录页	返回 code=401 状态

---

📌 实现 401/403 自动跳转

if (err.response?.status === 401) {
  ElMessage.warning('登录已过期，请重新登录');
  localStorage.removeItem('token');
  router.push('/login');
}

---

🧱 Spring Boot 后端处理 JWT

详见上一篇：

• 自定义 JwtAuthenticationFilter 提取 Token
• 从 Token 中获取 userId 和 role
• 设置 SecurityContextHolder 用户上下文
• 无需 Session，完全无状态认证

---

💡 Tips：多环境部署下处理 baseURL

const service = axios.create({
  baseURL: import.meta.env.VITE_BASE_API, // 通过 .env 配置
  timeout: 5000
});

.env.development 示例：

VITE_BASE_API = /api

部署时只需切换环境文件即可，无需改代码。

---

📦 前端目录结构建议（通信相关）

├── utils
│   └── request.js         // Axios 封装
├── api
│   ├── user.js            // 用户模块接口
│   ├── score.js           // 成绩模块接口
│   └── ...                // 其他模块接口

---

✅ 实际运行效果截图（建议插图）

• 登录后请求正常接口，自动附带 Token；
• Token 失效自动跳转登录页；
• 所有错误统一提示，开发体验与用户体验一致提升。

---

🔚 总结

通过封装 Axios 与统一响应处理，我实现了：

• ✅ 稳定的前后端通信机制；
• ✅ 请求附带 Token，响应全局处理；
• ✅ 401/403 自动登录跳转；
• ✅ 所有模块接口统一、调用规范清晰；
• ✅ 可快速复用于任何中后台项目；

这种通信机制既可适配小型项目，也具备向中大型系统扩展的基础能力。

—使用 Vue3 + Axios 与 Spring Boot 高效对接（含 token 处理）

📌 下一篇预告

📌《教务系统如何分层？Controller / Service / Mapper 三层详解》

你将看到 EduCore 系统如何组织后端架构、三层职责划分、接口设计、Service 拆分策略等。

---

🔗 项目源码地址

• GitHub：https://gitee.com/codevibe/grade-system
• Axios 封装、前后端对接代码已上传，支持一键部署体验

---

🙋‍♂️ 如果你觉得这篇文章有帮助：

• 点赞 👍
• 收藏 ⭐
• 评论 💬
• 关注我 👇 获取后续实战内容