
在现代单页应用(SPA)如React与API后端(FastAPI)分离的架构中,为未登录用户提供个性化体验或追踪其行为是常见的需求。传统的基于Cookie的会话管理在跨域(CORS)场景下,尤其是涉及withCredentials时,常会遇到复杂性或“Bad Request”等问题,因为浏览器对第三方Cookie有严格的安全限制。
JSON Web Token (JWT) 作为一种无状态的认证机制,非常适合API驱动的应用。它将用户身份信息编码在令牌中,由客户端存储并在每次请求时携带,后端通过验证令牌的签名来确认用户身份。这种方式避免了服务器端会话存储的开销,也更易于处理跨域请求,因为它不依赖于浏览器的Cookie策略。
FastAPI内置了强大的OAuth2和JWT认证支持。我们可以巧妙地利用这套机制,将其应用于匿名用户。核心思想是将每个匿名访问者视为一个特殊的“匿名用户”,为其生成一个唯一的标识符(例如anonymous_UUID),然后为这个标识符颁发一个JWT。客户端在后续请求中携带此JWT,后端即可通过解析令牌来识别匿名用户并获取其历史行为。
流程概览:
首先,确保你的FastAPI项目安装了必要的库:
pip install fastapi uvicorn python-jose[cryptography] passlib[bcrypt]
python-jose用于JWT的编码和解码,passlib(即使不用于密码验证,也可能被FastAPI的安全模块依赖)。
我们需要定义JWT的密钥、算法和过期时间,并创建用于生成和验证令牌的函数。
# app/core/security.py
from datetime import datetime, timedelta
from typing import Optional
from jose import JWTError, jwt
from fastapi import HTTPException, status, Depends
from fastapi.security import OAuth2PasswordBearer
# JWT 配置
SECRET_KEY = "your-super-secret-key" # 生产环境中请使用更安全的密钥,例如从环境变量读取
ALGORITHM = "HS256"
ACCESS_TOKEN_EXPIRE_MINUTES = 60 * 24 * 7 # 匿名令牌有效期可以设置长一些,例如7天
oauth2_scheme = OAuth2PasswordBearer(tokenUrl="/anon/login") # 指向匿名登录的URL
def create_access_token(data: dict, expires_delta: Optional[timedelta] = None):
"""创建访问令牌"""
to_encode = data.copy()
if expires_delta:
expire = datetime.utcnow() + expires_delta
else:
expire = datetime.utcnow() + timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES)
to_encode.update({"exp": expire})
encoded_jwt = jwt.encode(to_encode, SECRET_KEY, algorithm=ALGORITHM)
return encoded_jwt
def decode_access_token(token: str):
"""解码访问令牌"""
try:
payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM])
return payload
except JWTError:
raise HTTPException(
status_code=status.HTTP_401_UNAUTHORIZED,
detail="Could not validate credentials",
headers={"WWW-Authenticate": "Bearer"},
)
# 假设你有一个简单的数据库模型来存储匿名用户,这里用字典模拟
# 生产环境应替换为真实的数据库操作,例如SQLAlchemy或MongoDB
ANONYMOUS_USERS_DB = {} # {anon_id: {"actions": []}}
class AnonymousUser:
def __init__(self, anon_id: str):
self.anon_id = anon_id
# 可以在这里加载用户的持久化数据
self.data = ANONYMOUS_USERS_DB.get(anon_id, {"actions": []})
def save(self):
ANONYMOUS_USERS_DB[self.anon_id] = self.data
当用户首次访问时,前端调用此接口以获取匿名会话令牌。
# app/api/endpoints/anonymous.py
from fastapi import APIRouter, Depends, HTTPException, status
from uuid import uuid4
from app.core.security import create_access_token, decode_access_token, oauth2_scheme, AnonymousUser, ANONYMOUS_USERS_DB
router = APIRouter()
@router.post("/anon/login", summary="为匿名用户创建会话令牌")
async def create_anonymous_session():
"""
生成一个唯一的匿名用户ID,并为其创建访问令牌。
如果用户已存在(例如,通过Cookie或特定请求头传递的ID),可以尝试复用。
这里为了简单,每次都生成新的,实际可根据业务逻辑调整。
"""
anon_id = str(uuid4()) # 生成一个唯一的匿名ID
# 可以在这里将新的匿名用户ID存储到数据库中
# ANONYMOUS_USERS_DB[anon_id] = {"actions": []} # 模拟数据库存储
access_token = create_access_token(data={"sub": anon_id, "type": "anonymous"})
return {"access_token": access_token, "token_type": "bearer", "anon_id": anon_id}
这是一个FastAPI的依赖函数,用于从请求中提取并验证JWT,然后返回一个AnonymousUser对象。
# app/dependencies.py
from fastapi import Depends, HTTPException, status
from app.core.security import decode_access_token, oauth2_scheme, AnonymousUser
async def get_current_anonymous_user(token: str = Depends(oauth2_scheme)) -> AnonymousUser:
"""
从JWT中解析匿名用户ID。
"""
payload = decode_access_token(token)
anon_id: str = payload.get("sub")
token_type: str = payload.get("type")
if anon_id is None or token_type != "anonymous":
raise HTTPException(
status_code=status.HTTP_401_UNAUTHORIZED,
detail="Invalid anonymous token",
headers={"WWW-Authenticate": "Bearer"},
)
# 可以在这里从数据库加载匿名用户数据
# user_data = db_query_for_anonymous_user(anon_id)
# if not user_data:
# raise HTTPException(...) # 如果匿名用户ID在数据库中不存在,可能需要处理
return AnonymousUser(anon_id=anon_id)
在需要识别匿名用户的API接口中,将get_current_anonymous_user作为依赖注入。
# app/api/endpoints/items.py
from fastapi import APIRouter, Depends
from app.dependencies import get_current_anonymous_user
from app.core.security import AnonymousUser # 导入AnonymousUser类
router = APIRouter()
@router.get("/items/my_anonymous_items", summary="获取匿名用户的专属物品")
async def read_anonymous_items(current_anon_user: AnonymousUser = Depends(get_current_anonymous_user)):
"""
根据匿名用户的ID,返回其专属的物品列表。
"""
# 模拟从数据库获取匿名用户的物品数据
# 实际应用中,这里会根据 current_anon_user.anon_id 查询数据库
# 假设匿名用户的数据存储在 current_anon_user.data 中
user_actions = current_anon_user.data.get("actions", [])
return {
"anon_id": current_anon_user.anon_id,
"message": f"Welcome, anonymous user {current_anon_user.anon_id}!",
"your_items": ["item_A", "item_B"],
"previous_actions": user_actions
}
@router.post("/items/add_action", summary="记录匿名用户的行为")
async def add_anonymous_action(action: str, current_anon_user: AnonymousUser = Depends(get_current_anonymous_user)):
"""
记录匿名用户的行为,并持久化。
"""
current_anon_user.data["actions"].append(action)
current_anon_user.save() # 模拟保存到数据库
return {
"anon_id": current_anon_user.anon_id,
"message": f"Action '{action}' recorded for anonymous user {current_anon_user.anon_id}",
"current_actions": current_anon_user.data["actions"]
}
将上述路由添加到FastAPI应用中。
# app/main.py
from fastapi import FastAPI
from app.api.endpoints import anonymous, items
app = FastAPI(title="FastAPI Anonymous Session Demo")
app.include_router(anonymous.router, tags=["Anonymous Session"])
app.include_router(items.router, tags=["Items"])
@app.get("/")
async def root():
return {"message": "Welcome to the anonymous session demo!"}
在React应用中,你需要:
// React Frontend (示例)
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const API_BASE_URL = 'http://localhost:8000'; // 你的FastAPI后端地址
function App() {
const [anonId, setAnonId] = useState(null);
const [items, setItems] = useState([]);
const [actions, setActions] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const initializeAnonymousSession = async () => {
let token = localStorage.getItem('anon_access_token');
let currentAnonId = localStorage.getItem('anon_id');
if (!token) {
// 如果没有令牌,则请求新的匿名会话
try {
const response = await axios.post(`${API_BASE_URL}/anon/login`);
token = response.data.access_token;
currentAnonId = response.data.anon_id;
localStorage.setItem('anon_access_token', token);
localStorage.setItem('anon_id', currentAnonId);
console.log('New anonymous session created:', currentAnonId);
} catch (err) {
setError('Failed to create anonymous session.');
setLoading(false);
return;
}
} else {
console.log('Using existing anonymous session:', currentAnonId);
}
setAnonId(currentAnonId);
setLoading(false);
};
initializeAnonymousSession();
}, []);
useEffect(() => {
if (anonId) {
// 配置Axios拦截器,在每次请求中添加Authorization头
axios.interceptors.request.use(config => {
const token = localStorage.getItem('anon_access_token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
}, err => Promise.reject(err));
// 获取匿名用户的专属物品
const fetchAnonymousData = async () => {
try {
const itemsResponse = await axios.get(`${API_BASE_URL}/items/my_anonymous_items`);
setItems(itemsResponse.data.your_items);
setActions(itemsResponse.data.previous_actions);
} catch (err) {
setError('Failed to fetch anonymous data.');
}
};
fetchAnonymousData();
}
}, [anonId]);
const handleAddAction = async () => {
try {
const newAction = `action_${new Date().getTime()}`;
const response = await axios.post(`${API_BASE_URL}/items/add_action?action=${newAction}`);
setActions(response.data.current_actions);
console.log('Action added:', newAction);
} catch (err) {
setError('Failed to add action.');
}
};
if (loading) return <div>Loading anonymous session...</div>;
if (error) return <div>Error: {error}</div>;
return (
<div>
<h1>FastAPI & React Anonymous Session Demo</h1>
<p>Your Anonymous ID: {anonId}</p>
<h2>Your Items:</h2>
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
<h2>Your Recorded Actions:</h2>
<ul>
{actions.map((action, index) => (
<li key={index}>{action}</li>
))}
</ul>
<button onClick={handleAddAction}>Add New Action</button>
</div>
);
}
export default App;虽然JWT本身是无状态的,但为了追踪匿名用户的行为并提供个性化体验,我们仍需将匿名用户ID与相关数据(如购物车内容、浏览历史、偏好设置等)存储在后端数据库中。
数据库设计考量:
当匿名用户进行某些操作时,后端通过get_current_anonymous_user获取其anon_id,然后使用此ID查询或更新数据库中对应的数据。
以上就是FastAPI与React应用中匿名用户会话的建立与管理的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号