LangFlow+Auth：添加用户认证权限控制实战

1. 引言

1.1 业务场景描述

随着 AI 应用开发的普及，越来越多团队开始使用低代码平台提升研发效率。LangFlow 作为一款基于 LangChain 的可视化 AI 流水线构建工具，极大降低了大模型应用的开发门槛。然而，在实际生产环境中，一个关键问题逐渐凸显：缺乏用户认证与权限控制机制。

默认情况下，LangFlow 提供的是完全开放的访问接口，任何能够访问服务地址的用户都可以查看、修改甚至运行工作流。这在团队协作或多租户场景下存在严重的安全隐患。例如：

敏感 Prompt 模板可能被未授权人员获取
已配置的 API 密钥可能泄露
用户可以随意更改核心逻辑导致服务异常

因此，为 LangFlow 添加用户登录认证和权限管理功能，是将其从“实验工具”升级为“生产级系统”的必要步骤。

1.2 痛点分析

当前 LangFlow 官方版本（v1.3.x）并未内置完整的身份认证模块，主要依赖以下几种方式实现安全控制：

基于反向代理的身份验证（如 Nginx + Basic Auth）
外部 OAuth 集成（需自行开发中间层）
网络隔离（仅限内网访问）

这些方案各有局限： - Basic Auth 安全性弱且无法区分角色权限 - OAuth 开发成本高，集成复杂 - 网络隔离不能解决内部越权问题

本文将介绍一种轻量级但可落地的解决方案 ——基于 FastAPI 内置安全组件与 JWT 的用户认证系统扩展，实现在不修改 LangFlow 核心代码的前提下，为其前端界面和后端 API 添加完整的登录鉴权能力。

1.3 方案预告

我们将通过以下方式完成改造： 1. 分析 LangFlow 架构与认证切入点 2. 设计基于用户名/密码 + JWT Token 的认证流程 3. 扩展 FastAPI 路由实现/login接口 4. 修改前端路由拦截未授权请求 5. 实现多用户会话管理与登出机制

最终实现效果：用户必须登录才能访问 LangFlow 主页，所有 API 请求均需携带有效 Token，支持账号密码注册与登录，具备基础的权限隔离能力。

2. 技术方案选型

2.1 LangFlow 架构简析

LangFlow 基于 Python 的 FastAPI 框架构建，采用前后端分离架构：

后端：FastAPI 提供 RESTful API，处理工作流保存、加载、执行等逻辑
前端：React 编写，通过 HTTP 请求调用后端接口
存储：默认使用 SQLite 存储 flow 配置信息

其核心启动入口位于main.py，其中定义了所有 API 路由。这意味着我们可以在不侵入原有逻辑的情况下，通过扩展 FastAPI 的 middleware 和 router 来插入认证逻辑。

2.2 认证技术对比

方案	易用性	安全性	可维护性	是否需要外部依赖
Basic Auth	⭐⭐⭐⭐	⭐⭐	⭐⭐⭐	否
Session/Cookie	⭐⭐⭐	⭐⭐⭐	⭐⭐⭐	是（Redis）
JWT Token	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	否
OAuth2 (Google/GitHub)	⭐⭐	⭐⭐⭐⭐⭐	⭐⭐	是

综合考虑部署便捷性和安全性，选择JWT（JSON Web Token）方案最为合适。它无需额外数据库或缓存服务，适合嵌入式部署；同时支持无状态鉴权，便于未来横向扩展。

2.3 最终技术栈

认证协议：JWT Bearer Token
加密算法：HS256（对称加密）
Token 存储：浏览器 localStorage
密码哈希：bcrypt
拦截机制：FastAPI Dependency + Middleware
前端拦截：React Router Guard

3. 实现步骤详解

3.1 环境准备

确保已克隆 LangFlow 源码并能正常运行：

git clone https://github.com/logspace-ai/langflow.git cd langflow pip install -e . langflow --host 0.0.0.0 --port 7860

我们需要修改的核心文件包括： -backend/langflow/main.py：主入口，添加新路由 -backend/langflow/database/models/user.py：用户模型（新增） -frontend/src/components/ProtectedRoute.jsx：前端路由守卫（新增）

3.2 创建用户模型与数据库表

在backend/langflow/database/models/目录下创建user.py：

# user.py from sqlalchemy import Column, Integer, String, DateTime from langflow.database.base import SQLModel import datetime import bcrypt class User(SQLModel, table=True): id: int = Column(Integer, primary_key=True, index=True) username: str = Column(String, unique=True, index=True) hashed_password: str = Column(String) created_at: DateTime = Column(DateTime, default=datetime.datetime.utcnow) def verify_password(self, plain_password: str) -> bool: return bcrypt.checkpw( plain_password.encode('utf-8'), self.hashed_password.encode('utf-8') ) @staticmethod def hash_password(password: str) -> str: return bcrypt.hashpw(password.encode('utf-8'), bcrypt.gensalt()).decode('utf-8')

然后在数据库初始化时创建该表（通常在main.py中调用create_db_and_tables()）。

3.3 实现 JWT 认证逻辑

安装依赖：

pip install python-jose[cryptography]

创建auth.py：

# auth.py from fastapi import Depends, HTTPException, status from fastapi.security import OAuth2PasswordBearer from jose import jwt, JWTError from typing import Optional from datetime import datetime, timedelta from .database.models.user import User from .database import get_session from sqlmodel import Session SECRET_KEY = "your-super-secret-key-change-in-production" ALGORITHM = "HS256" ACCESS_TOKEN_EXPIRE_MINUTES = 60 * 24 # 24小时 oauth2_scheme = OAuth2PasswordBearer(tokenUrl="/login") def create_access_token(data: dict) -> str: to_encode = data.copy() expire = datetime.utcnow() + timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES) to_encode.update({"exp": expire}) return jwt.encode(to_encode, SECRET_KEY, algorithm=ALGORITHM) async def get_current_user( token: str = Depends(oauth2_scheme), session: Session = Depends(get_session) ) -> User: credentials_exception = HTTPException( status_code=status.HTTP_401_UNAUTHORIZED, detail="Could not validate credentials", headers={"WWW-Authenticate": "Bearer"}, ) try: payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM]) username: str = payload.get("sub") if username is None: raise credentials_exception except JWTError: raise credentials_exception user = session.query(User).filter(User.username == username).first() if user is None: raise credentials_exception return user

3.4 添加登录接口

在main.py中注册/login路由：

from fastapi import FastAPI, Form from .auth import create_access_token, User, get_session from sqlmodel import Session @app.post("/login") def login( username: str = Form(...), password: str = Form(...) ): session: Session = next(get_session()) user = session.query(User).filter(User.username == username).first() if not user or not user.verify_password(password): raise HTTPException( status_code=401, detail="Invalid credentials" ) token = create_access_token({"sub": user.username}) return {"access_token": token, "token_type": "bearer"}

3.5 拦截所有 API 请求

使用 FastAPI 的全局依赖注入机制，在main.py初始化时设置：

from fastapi import FastAPI from .auth import get_current_user app = FastAPI(dependencies=[Depends(get_current_user)])

这样所有后续注册的路由都将自动校验 Token。

注意：如果你只想保护部分接口（如/flows），可改为在具体路由中添加dependencies=[Depends(get_current_user)]

3.6 前端登录页面与路由守卫

在 React 前端添加简单登录表单（Login.jsx）：

// Login.jsx import { useState } from 'react'; import axios from 'axios'; export default function Login() { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const handleSubmit = async (e) => { e.preventDefault(); try { const res = await axios.post('/login', { username, password }); localStorage.setItem('token', res.data.access_token); window.location.href = '/'; // 跳转主页 } catch (err) { alert('Login failed'); } }; return ( <form onSubmit={handleSubmit}> <input value={username} onChange={e => setUsername(e.target.value)} placeholder="Username" /> <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="Password" /> <button type="submit">Login</button> </form> ); }

并在App.jsx中使用 ProtectedRoute 包裹主界面：

// ProtectedRoute.jsx import { useEffect, useState } from 'react'; import { Navigate } from 'react-router-dom'; export default function ProtectedRoute({ children }) { const [isAuthenticated, setIsAuthenticated] = useState(null); useEffect(() => { const token = localStorage.getItem('token'); if (!token) { setIsAuthenticated(false); return; } fetch('/health', { headers: { 'Authorization': `Bearer ${token}` } }).then(res => { setIsAuthenticated(res.ok); }).catch(() => setIsAuthenticated(false)); }, []); if (isAuthenticated === null) return <div>Loading...</div>; if (!isAuthenticated) return <Navigate to="/login" />; return children; }

3.7 初始化管理员账户

在应用启动时自动创建初始用户（可在main.py中添加）：

def create_default_user(session: Session): user = session.query(User).filter(User.username == "admin").first() if not user: new_user = User( username="admin", hashed_password=User.hash_password("admin123") # 生产环境请更换密码 ) session.add(new_user) session.commit() # 在启动时调用 create_db_and_tables() session = next(get_session()) create_default_user(session)

4. 实践问题与优化

4.1 遇到的问题及解决方案

问题1：前端静态资源路径冲突

由于 FastAPI 同时托管前端资源，添加/login接口后可能导致路由优先级问题。

解决方案：确保@app.post("/login")在所有静态文件挂载之前注册，或使用独立前缀如/api/login。

问题2：Token 过期后前端无感知

用户长时间操作后 Token 失效，再次请求会被 401 拦截但未跳转登录页。

解决方案：在 Axios 拦截器中统一处理 401 错误：

axios.interceptors.response.use( (res) => res, (err) => { if (err.response?.status === 401) { localStorage.removeItem('token'); window.location.href = '/login'; } return Promise.reject(err); } );

问题3：跨域请求携带凭证失败

若前端与后端跨域部署，需启用 CORS 并允许凭据传输。

解决方案：

from fastapi.middleware.cors import CORSMiddleware app.add_middleware( CORSMiddleware, allow_origins=["http://localhost:3000"], # 前端地址 allow_credentials=True, allow_methods=["*"], allow_headers=["*"], )