FastAPI-React扩展指南：如何自定义认证流程与添加新功能模块

FastAPI-React扩展指南：如何自定义认证流程与添加新功能模块

【免费下载链接】fastapi-react🚀 Cookiecutter Template for FastAPI + React Projects. Using PostgreSQL, SQLAlchemy, and Docker项目地址: https://gitcode.com/gh_mirrors/fa/fastapi-react

FastAPI-React是一个基于FastAPI和React的Cookiecutter模板项目，使用PostgreSQL、SQLAlchemy和Docker构建，提供了完整的前后端架构。本指南将详细介绍如何自定义认证流程和添加新功能模块，帮助开发者快速扩展项目功能。

自定义认证流程的核心步骤

认证流程是Web应用的重要组成部分，FastAPI-React提供了基础的JWT认证实现，我们可以通过以下步骤进行自定义。

理解现有认证架构

项目的认证功能主要通过以下文件实现：

• 后端认证逻辑：backend/app/api/api_v1/routers/auth.py
• 前端认证提供器：frontend/src/admin/authProvider.ts

认证流程的核心是通过/api/token端点获取JWT令牌，然后在后续请求中使用该令牌进行身份验证。

FastAPI-React默认登录界面，用户通过用户名和密码获取认证令牌

修改JWT过期时间

要调整JWT令牌的过期时间，可以修改security.py中的ACCESS_TOKEN_EXPIRE_MINUTES常量：

# 在backend/app/core/security.py中 ACCESS_TOKEN_EXPIRE_MINUTES = 30 # 默认30分钟，可根据需求调整

添加多因素认证

1. 后端实现：在auth.py的login函数中添加多因素认证逻辑
2. 前端调整：修改frontend/src/views/Login.tsx添加二次验证界面

扩展用户权限系统

默认系统只区分了"admin"和"user"两种权限，我们可以扩展为更细粒度的权限控制。

后端权限扩展

1. 修改用户模型，添加更详细的权限字段：

   # 在backend/app/db/models.py中 class User(Base): # ...现有字段 can_edit = Column(Boolean, default=False) can_delete = Column(Boolean, default=False)

2. 更新JWT生成逻辑，包含更多权限信息：

   # 在auth.py的login函数中 access_token = security.create_access_token( data={ "sub": user.email, "permissions": { "admin": user.is_superuser, "edit": user.can_edit, "delete": user.can_delete } }, expires_delta=access_token_expires, )

前端权限控制

修改frontend/src/admin/authProvider.ts中的权限检查逻辑，实现基于细粒度权限的访问控制。

在管理界面中可以配置用户的详细权限

添加新功能模块的完整流程

添加新功能模块需要同时修改后端API和前端界面，以下是添加"任务管理"模块的示例。

后端API开发

1. 创建数据模型：在backend/app/db/models.py中添加Task模型
2. 创建CRUD操作：在backend/app/db/crud.py中实现任务的增删改查
3. 创建API路由：在backend/app/api/api_v1/routers/目录下创建tasks.py

前端界面开发

1. 创建任务列表组件：在frontend/src/views/目录下创建Tasks.tsx
2. 添加路由配置：在frontend/src/Routes.tsx中添加任务模块的路由
3. 创建API调用函数：在frontend/src/utils/api.ts中添加任务相关的API调用

API文档自动生成

FastAPI会自动为新添加的API生成文档，访问/api/docs即可查看和测试API。

FastAPI自动生成的交互式API文档，可直接测试接口功能

测试与部署新功能

添加新功能后，应进行充分测试并更新部署配置：

1. 编写测试用例：在backend/app/api/api_v1/routers/tests/目录下添加测试文件
2. 更新Docker配置：如果需要额外依赖，更新backend/Dockerfile和docker-compose.yml
3. 运行测试：使用项目提供的测试脚本进行验证

   ./scripts/test.sh

通过以上步骤，你可以轻松扩展FastAPI-React项目的认证系统和功能模块，构建满足特定需求的Web应用。项目的模块化设计使得扩展变得简单，同时保持代码的可维护性和可扩展性。

【免费下载链接】fastapi-react🚀 Cookiecutter Template for FastAPI + React Projects. Using PostgreSQL, SQLAlchemy, and Docker项目地址: https://gitcode.com/gh_mirrors/fa/fastapi-react