【用戶認證篇】安全第一步：基于 JWT 的前后端分離認證方案
- 前言
- 什么是 JWT (JSON Web Token)？
- 準備工作
- 第一部分：后端 Django 配置 JWT 認證
- 1. 安裝 `djangorestframework-simplejwt`
- 2. 在 `settings.py` 中配置 `djangorestframework-simplejwt`
- 3. 在項目的 `urls.py` 中添加 JWT 相關的 URL 端點
- 4. 創建用戶注冊 API
- 5. 保護你的其他 API 端點
- 6. 測試后端 JWT API
- 第二部分：前端 Vue3 集成 JWT 認證
- 1. 更新 Pinia `userStore` 以處理 JWT Token
- 2. 更新 `LoginView.vue` 和創建 `RegisterView.vue`
- 3. 更新 Axios 請求攔截器 (`utils/request.ts`)
- 4. 更新路由守衛 (`router/index.ts`)
- 5. 更新 `App.vue` (可選，但通常 `loadTokensFromLocalStorage` 放在這里也很好)
- 第三部分：全面測試 JWT 認證流程
- 總結
前言
到目前為止，我們的測試平臺在功能上已經相對完善了，用戶可以管理項目、模塊、用例、計劃，執行測試并查看報告。但是，這一切操作都是在“裸奔”——沒有任何用戶認證和權限控制。任何人都可以訪問和操作所有數據，這在實際生產環境中是絕對不可接受的。
因此，本篇文章將聚焦于為我們的測試平臺構建用戶認證系統。我們將采用目前前后端分離架構中非常流行的 JWT (JSON Web Token) 認證方案。
在前后端分離的應用中，傳統的基于 Session 的認證方式不再適用，因為前端和后端可能部署在不同的域，Session Cookie 的跨域共享會很麻煩。JWT 提供了一種無狀態的、基于 Token 的認證機制，非常適合這種場景。
這篇文章將帶你：
- 理解 JWT 的基本概念和工作原理。
- 在 Django 后端集成
djangorestframework-simplejwt庫，實現用戶注冊、登錄（獲取 Token）、Token 刷新和驗證的 API。 - 在前端 Vue3 應用中，調整登錄流程以調用新的 JWT 認證 API。
- 使用 Pinia Store 存儲和管理 JWT Token。
- 配置 Axios 請求攔截器?
)
