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

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

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

要点解析

Axios实例创建

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

代码示例

javascript 复制代码

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 => {
  // 判断是否需要带 token
  const 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）

javascript 复制代码

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）

java 复制代码

@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 响应，前端响应拦截统一渲染或异常处理

流程图

java 复制代码

sequenceDiagram
  participant 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/list
  B->>B: 校验token与权限
  B-->>P: 返回数据(JSON)
  P-->>F: 返回数据
  F->>F: 响应拦截器处理、渲染表格/提示

五、响应与全局异常处理

要点解析

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

代码示例

javascript 复制代码

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、异常等细节
代码整洁，职责清晰

代码示例

javascript 复制代码

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;
});

七、总结与建议

要点解析

Axios 拦截器建议做成全局模块，减少重复代码
权限标识前后端统一管理，接口安全与页面渲染保持一致
本地代理开发和生产环境分开配置，防止上线出错
统一响应结构、全局异常处理、用户体验更友好

结语

掌握前端统一请求（Axios）、本地代理、后端接口权限校验、响应拦截及全局异常处理等环节，是高效开发现代企业级前后端分离项目的关键！