当前位置：首页 > news >正文

若依框架下前后端分离项目交互流程详解

news 2025/7/17 7:12:04

在企业级前后端分离项目开发中（如若依RuoYi），前端与后端的数据交互、安全认证、权限校验、响应处理都是必须关注的重点。本文将以“课程管理列表查询”为例，详细梳理整个交互流程，每一步均有解析说明和典型代码，方便大家学习和复用。

一、前端请求环节：Axios 封装与拦截器

要点解析

Axios实例创建
配置 baseURL、超时等参数，确保所有接口走统一实例，便于全局维护。
请求拦截器
- 判断是否需要 token（如开放接口可配置 isToken=false）
- 自动携带用户 token，无感集成到请求头
- 防止重复提交（如 isRepeatSubmit 参数控制），统一 GET 参数处理等
响应拦截器
- 针对不同 HTTP 状态码/业务状态码（如 401、500）进行全局提示、重定向、弹窗等友好交互
- 例如 token 失效自动重定向到登录页，操作失败统一错误提示

代码示例

import axios from 'axios';
import { getToken } from '@/utils/auth';const service = axios.create({baseURL: import.meta.env.VITE_APP_BASE_API, // 统一接口前缀timeout: 10000
});// 请求拦截器
service.interceptors.request.use(config => {// 判断是否需要带 tokenconst isToken = (config.headers || {}).isToken !== false;if (getToken() && isToken) {config.headers['Authorization'] = 'Bearer ' + getToken();}return config;
}, error => Promise.reject(error));// 响应拦截器
service.interceptors.response.use(res => {// 处理业务状态码if (res.data.code !== 200) {if (res.data.code === 401) {// token 过期弹窗/重定向}return Promise.reject(res.data.msg || 'Error');}return res.data;
}, error => Promise.reject(error));export default service;

二、开发环境跨域解决：本地代理配置

要点解析

本地开发时前端和后端端口不同（如 3000、8080），会产生跨域问题
配置代理服务器（如 Vite、Webpack DevServer），自动将前端的“伪接口前缀”请求转发到真实后端接口
好处：开发时免跨域，接口路径与线上保持一致

代码示例（vite.config.js）

export default defineConfig({server: {proxy: {'/dev-api': {target: 'http://localhost:8080',changeOrigin: true,rewrite: path => path.replace(/^\/dev-api/, '')}}}
});

解析说明：

前端写 /dev-api/course/course/list，代理自动转发并去掉 /dev-api，最后变成 /course/course/list 到后端服务。

三、后端接口设计：身份认证与权限控制

要点解析

后端基于 Spring Boot + Spring Security
token 认证用于确认用户身份，权限校验（如 @PreAuthorize）用于控制接口操作范围
权限标识如 course:course:list 与前端按钮、菜单权限保持一致
返回统一响应格式便于前端处理

代码示例（Controller）

@RestController
@RequestMapping("/course/course")
public class CourseController {// 权限控制，只有拥有 'course:course:list' 权限的用户才能访问@PreAuthorize("@ss.hasPermi('course:course:list')")@GetMapping("/list")public TableDataInfo list(Course course) {startPage(); // 分页处理List<Course> list = courseService.selectCourseList(course);return getDataTable(list); // 统一格式}
}

解析说明：

@PreAuthorize 在方法执行前自动校验权限，保证数据安全。
认证（Authentication）和授权（Authorization）分离，分别处理“你是谁”“你能干什么”。

四、前后端完整流程串联

要点解析

前端 Axios 发送请求（带 token），代理转发到后端
后端校验 token 身份，再校验接口权限
返回 JSON 响应，前端响应拦截统一渲染或异常处理

流程图

sequenceDiagramparticipant F as 前端(Vue+Axios)participant P as Vite代理participant B as 后端(Spring Boot)F->>P: GET /dev-api/course/course/list (带token)P->>B: 转发为 /course/course/listB->>B: 校验token与权限B-->>P: 返回数据(JSON)P-->>F: 返回数据F->>F: 响应拦截器处理、渲染表格/提示

五、响应与全局异常处理

要点解析

前端通过响应拦截器判断返回码，自动处理 401（重登）、500（错误）、其他（消息提示）
统一弹窗或通知，提升用户体验和开发效率

代码示例

import { ElMessage } from 'element-plus';
service.interceptors.response.use(res => {if (res.code !== 200) {ElMessage.error(res.msg || '请求失败');return Promise.reject(res.msg);}return res;},error => {ElMessage.error(error.message || '请求出错');return Promise.reject(error);}
);

解析说明：

只需在响应拦截器集中处理，页面调用接口时无需重复写 try/catch。

六、前端实际调用接口示例

要点解析

业务组件只需调用封装好的 API，无需关心 token、异常等细节
代码整洁，职责清晰

代码示例

import request from '@/utils/request';export function listCourse(query) {return request({url: '/course/course/list',method: 'get',params: query});
}// 在页面组件中
listCourse({ pageNum: 1, pageSize: 10 }).then(res => {this.tableData = res.rows;this.total = res.total;
});