在企業級前后端分離項目開發中（如若依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;
});
七、總結與建議
要點解析
Axios 攔截器建議做成全局模塊，減少重復代碼
權限標識前后端統一管理，接口安全與頁面渲染保持一致
本地代理開發和生產環境分開配置，防止上線出錯
統一響應結構、全局異常處理、用戶體驗更友好
結語
掌握前端統一請求（Axios）、本地代理、后端接口權限校驗、響應攔截及全局異常處理等環節，是高效開發現代企業級前后端分離項目的關鍵！
