认证系统项目

一个完整的用户认证系统，使用 Vue.js 前端和 FastAPI 后端构建。

项目概述

本项目是一个现代化的用户认证系统，包含用户注册、登录、令牌管理、权限控制等完整功能。适合作为学习 Vue.js 和 FastAPI 的练手项目。

技术栈

前端:

• Vue.js 3.x
• Vue Router
• Pinia (状态管理)
• Axios (HTTP客户端)
• Vite (构建工具)

后端:

• FastAPI
• SQLAlchemy (ORM)
• JWT (JSON Web Tokens)
• Python-Jose (JWT实现)
• Passlib (密码哈希)

项目结构

authentication/
├── backend/                 # 后端代码
│   ├── main.py            # FastAPI主应用
│   ├── user_service.py    # 用户服务
│   ├── refresh_token_service.py  # 刷新令牌服务
│   ├── routes/            # API路由
│   │   ├── auth.py        # 认证路由
│   │   └── protected.py   # 受保护路由
│   ├── requirements.txt   # Python依赖
│   └── .env.example       # 环境变量示例
├── frontend/              # 前端代码
│   ├── src/
│   │   ├── main.js        # Vue应用入口
│   │   ├── App.vue        # 根组件
│   │   ├── router/        # 路由配置
│   │   ├── stores/        # 状态管理
│   │   ├── services/      # API服务
│   │   ├── views/         # 页面组件
│   │   └── assets/        # 静态资源
│   ├── package.json       # 项目配置
│   ├── vite.config.js    # Vite配置
│   └── index.html         # HTML入口
└── README.md              # 项目文档

功能特性

用户认证

• ✅ 用户注册
• ✅ 用户登录
• ✅ JWT令牌认证
• ✅ 刷新令牌机制
• ✅ 用户登出
• ✅ 密码哈希存储

权限控制

• ✅ 路由守卫
• ✅ 基于角色的访问控制
• ✅ 管理员权限
• ✅ 令牌过期处理

用户管理

• ✅ 用户信息查看
• ✅ 个人资料编辑
• ✅ 用户状态管理
• ✅ 登录历史记录

系统功能

• ✅ 响应式设计
• ✅ 错误处理
• ✅ 加载状态管理
• ✅ API请求拦截

快速开始

环境要求

• Node.js 16+ (前端)
• Python 3.8+ (后端)
• SQLite (默认数据库)

后端设置

1. 进入后端目录

cd backend

2. 创建虚拟环境

python -m venv venv
source venv/bin/activate  # Linux/Mac
# 或
venv\Scripts\activate      # Windows

3. 安装依赖

pip install -r requirements.txt

4. 配置环境变量

cp .env.example .env
# 编辑 .env 文件设置你的配置

5. 启动开发服务器

uvicorn main:app --reload --host 0.0.0.0 --port 8000

后端服务将在 http://localhost:8000 运行

前端设置

1. 进入前端目录

cd frontend

2. 安装依赖

npm install

3. 启动开发服务器

npm run dev

前端应用将在 http://localhost:3000 运行

API文档

启动后端服务后，可以访问以下文档：

• Swagger UI: http://localhost:8000/docs
• ReDoc: http://localhost:8000/redoc

开发指南

后端开发

数据库模型

项目使用 SQLAlchemy ORM，数据库模型定义在相应的服务文件中。

添加新的API端点

1. 在 routes/ 目录下创建新的路由文件
2. 在 main.py 中注册路由
3. 在相应的服务文件中实现业务逻辑

认证中间件

使用 FastAPI 的依赖注入系统实现认证中间件：

async def get_current_user(token: str = Depends(oauth2_scheme)):
    # 验证JWT令牌并返回用户信息

前端开发

状态管理

使用 Pinia 进行状态管理，认证状态存储在 stores/auth.js 中。

路由配置

路由配置在 router/index.js 中，包含路由守卫逻辑。

API调用

所有API调用通过 services/api.js 中的封装函数进行。

部署

生产环境配置

后端

1. 设置生产环境变量
2. 使用生产级ASGI服务器（如 Uvicorn + Gunicorn）
3. 配置反向代理（如 Nginx）

前端

1. 构建生产版本

npm run build

2. 部署到静态文件服务器

测试

后端测试

cd backend
pytest

前端测试

cd frontend
npm run test

故障排除

常见问题

1. 端口冲突

   • 后端默认端口：8000
   • 前端默认端口：3000
   • 修改端口可在配置文件中调整

2. CORS错误

   • 确保后端CORS配置正确
   • 检查前端API请求地址

3. 数据库连接问题

   • 检查数据库文件权限
   • 验证数据库连接字符串

调试技巧

• 使用浏览器开发者工具查看网络请求
• 检查后端日志输出
• 验证环境变量配置

贡献指南

欢迎提交 Issue 和 Pull Request！

开发流程

1. Fork 项目
2. 创建功能分支
3. 提交更改
4. 推送到分支
5. 创建 Pull Request

代码规范

• 遵循 PEP 8 (Python)
• 使用 ESLint (JavaScript)
• 添加详细的注释
• 编写单元测试

许可证

本项目采用 MIT 许可证。

联系方式

如有问题或建议，请通过以下方式联系：

• 创建 Issue
• 发送邮件

---

注意: 本项目主要用于学习和练手，生产环境使用前请进行充分的安全测试。