在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

langflow-ai/langflow

菜单

API 通信和认证

相关源文件

本文档涵盖了 Langflow 的前端 API 通信层和认证系统。它详细介绍了 React 前端如何与 FastAPI 后端通信，管理用户认证，处理 API 密钥，并实现请求/响应模式。有关后端 API 端点和数据库操作，请参阅 Flow 存储和管理 API。有关用户界面认证组件，请参阅 用户界面和样式。

身份验证系统概述

认证系统管理多种凭证类型，并在整个应用程序中提供不同级别的访问权限。

来源： src/frontend/src/contexts/authContext.tsx1-124 src/frontend/src/controllers/API/api.tsx1-358 src/frontend/src/constants/constants.ts

API 客户端架构

API 客户端基于 Axios 构建，并具有自动化的请求/响应拦截器，用于认证和错误处理。

核心 API 实例

主 API 客户端配置有基础 URL 和自动拦截器。

API 客户端处理不同的 URL 类型，并具有特定的授权逻辑。

URL 类型需要授权自定义标头
外部 GitHub URL否否
自动登录端点否否
内部 API 端点是是
Store API 端点API密钥是

来源： src/frontend/src/controllers/API/api.tsx17-21 src/frontend/src/controllers/API/api.tsx104-128 src/frontend/src/controllers/API/api.tsx131-145

请求拦截器逻辑

请求拦截器会自动附加认证令牌和自定义标头。

来源： src/frontend/src/controllers/API/api.tsx147-183 src/frontend/src/controllers/API/helpers/check-duplicate-requests.ts

令牌管理

认证系统通过存储在 Cookie 中的多种令牌类型来管理，并在整个应用程序中使用。

令牌存储和检索

标记类型Cookie 键目的
访问令牌LANGFLOW_ACCESS_TOKEN用户认证
刷新令牌LANGFLOW_REFRESH_TOKEN令牌续期
API 令牌LANGFLOW_API_TOKENStore API 访问
自动登录LANGFLOW_AUTO_LOGIN_OPTION登录偏好

AuthContext 通过几个关键函数管理令牌的生命周期。

  • login() - 在成功认证后设置访问令牌和刷新令牌。
  • storeApiKey() - 为 Store 功能管理 API 密钥。
  • getUser() - 使用当前访问令牌检索用户数据。

来源： src/frontend/src/contexts/authContext.tsx80-96 src/frontend/src/contexts/authContext.tsx98-100 src/frontend/src/constants/constants.ts

令牌刷新机制

当发生认证错误时，系统会自动尝试刷新令牌。

来源： src/frontend/src/controllers/API/api.tsx193-205 src/frontend/src/controllers/API/api.tsx207-226 src/frontend/src/controllers/API/api.tsx238-259

API 控制器

主要的 API 控制器提供不同系统功能的函数，按功能分组。

核心 API 函数

主 API 控制器按功能领域导出函数。

函数类别关键函数目的
身份验证createApiKey()生成 API 密钥。
Store 操作saveFlowStore(), updateFlowStore()Flow 市场
组件管理getStoreComponents(), getComponent()组件检索
Flow 执行getVerticesOrder(), postBuildVertex()图构建
外部 APIgetRepoStars(), getDiscordCount()社交数据

Store API 认证

Store 相关函数需要特殊的 API 密钥认证。

这些函数会检查有效的 API 密钥，并通过更新 Store 认证状态来处理授权错误。

来源： src/frontend/src/controllers/API/index.ts43-52 src/frontend/src/controllers/API/index.ts61-95 src/frontend/src/controllers/API/index.ts97-176

图执行 API

Flow 执行需要经过身份验证的请求来构建和运行组件。

  • getVerticesOrder() - 检索组件执行顺序。
  • postBuildVertex() - 构建单个 Flow 组件。

这些函数接受可选的节点和边数据作为 Flow 上下文。

来源： src/frontend/src/controllers/API/index.ts256-283 src/frontend/src/controllers/API/index.ts285-303

受保护的路由和守卫

路由系统实现了多个级别的认证守卫来保护应用程序的不同区域。

路由保护层级

路由守卫实现

守卫组件保护级别重定向目标
ProtectedRoute基本认证/login
ProtectedAdminRoute仅限管理员用户/
ProtectedLoginRoute未经验证的用户/
AuthSettingsGuard设置访问自定义

来源：src/frontend/src/routes.tsx8-11 src/frontend/src/routes.tsx71-74 src/frontend/src/routes.tsx147-150

商店身份验证

Store页面实现了专门针对市场功能的身份验证系统，使用独立于用户身份验证的API密钥。

商店身份验证状态

useStoreStore 管理商店操作的API密钥状态

商店身份验证流程

Store页面通过以下方式处理身份验证错误：

  • 在缺少API密钥时显示适当的错误消息
  • 在收到401/403响应时自动使API密钥失效
  • 在未授权时禁用用户特定过滤器

来源：src/frontend/src/pages/StorePage/index.tsx48-52 src/frontend/src/pages/StorePage/index.tsx75-90 src/frontend/src/pages/StorePage/index.tsx125-144

流式请求系统

对于实时流程执行，系统实现了处理服务器发送事件的流式请求机制。

流式请求配置

performStreamingRequest() 函数处理分块响应和 JSON 解析，以进行实时流程执行更新。

来源：src/frontend/src/controllers/API/api.tsx264-273 src/frontend/src/controllers/API/api.tsx275-356