十八、【用户认证篇】安全第一步：基于 JWT 的前后端分离认证方案
【用户认证篇】安全第一步：基于 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 请求拦截器ÿ