如何在Auth0验证的React请求中携带用户信息访问Django后端受保护接口

你当前使用的Auth0 Django官方教程是面向服务端渲染的传统Web应用，依赖Session Cookie完成身份校验。使用Django模板登录时浏览器会自动携带会话Cookie，所以request.user可以正常识别登录状态。而React前端使用无密码登录流程获取的是Bearer类型的Access Token，你的Django后端当前没有适配这种Token认证逻辑，且前端请求未携带Token，因此接口始终返回未登录状态。

1. 后端适配JWT Token认证 #

1.1 安装依赖 #

安装JWT解析和加密相关依赖：
pip install python-jose[cryptography] requests
如果前后端端口不同存在跨域问题，额外安装跨域处理依赖：
pip install django-cors-headers

1.2 编写Auth0 Token校验逻辑 #

创建utils/auth0.py文件，实现JWT解析校验功能：

from jose import jwt, JWTError
from django.conf import settings
from django.contrib.auth import get_user_model
import requests

User = get_user_model()

def get_auth0_public_key():
    jwks = requests.get(f"https://{settings.AUTH0_DOMAIN}/.well-known/jwks.json").json()
    return jwks

def validate_auth0_token(token):
    jwks = get_auth0_public_key()
    unverified_header = jwt.get_unverified_header(token)
    rsa_key = {}
    for key in jwks["keys"]:
        if key["kid"] == unverified_header["kid"]:
            rsa_key = {
                "kty": key["kty"],
                "kid": key["kid"],
                "use": key["use"],
                "n": key["n"],
                "e": key["e"]
            }
    if rsa_key:
        try:
            payload = jwt.decode(
                token,
                rsa_key,
                algorithms=["RS256"],
                audience=settings.AUTH0_AUDIENCE,
                issuer=f"https://{settings.AUTH0_DOMAIN}/"
            )
        except JWTError:
            return None
        # 查找或创建对应用户
        user, _ = User.objects.get_or_create(
            username=payload["sub"],
            defaults={"email": payload.get("email", "")}
        )
        return user
    return None

1.3 配置Django设置 #

在settings.py中添加以下配置：

# Auth0配置
AUTH0_DOMAIN = "你的Auth0域名（示例：xxx.us.auth0.com）"
AUTH0_AUDIENCE = "你在Auth0后台创建的API标识符"

# 跨域配置（前后端端口不同时需要）
INSTALLED_APPS = [
    # ... 其他原有应用
    'corsheaders',
]
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', # 放在中间件列表最顶部
    # ... 其他原有中间件
]
# 开发环境可临时使用，生产环境替换为CORS_ALLOWED_ORIGINS指定可信前端域名
CORS_ALLOW_ALL_ORIGINS = True 
CORS_ALLOW_HEADERS = ["*"]

1.4 接口适配认证逻辑 #

修改你的测试接口，适配Token认证：

from django.http import JsonResponse
from .utils.auth0 import validate_auth0_token

def test(request):
    # 从请求头获取Token
    auth_header = request.META.get("HTTP_AUTHORIZATION")
    user = None
    if auth_header and auth_header.startswith("Bearer "):
        token = auth_header.split(" ")[1]
        user = validate_auth0_token(token)
    if user and user.is_authenticated:
        return JsonResponse({'outcome': 'success'}) 
    else:
        return JsonResponse({'outcome': 'failure'})

2. 前端修改请求逻辑 #

2.1 调整Auth0配置，添加API受众 #

在Auth0LockPasswordless初始化配置中，给auth.params添加audience字段，确保获取的是可解析的JWT Token：

auth: {
  redirectUrl: redirectURL, 
  responseType: 'token',
  params: {
    scope: 'openid email',
    audience: '和后端配置一致的Auth0 API标识符' // 新增字段            
  }          
},

2.2 接口请求携带Token #

修改testCheck函数，请求时携带Authorization头：

const testCheck = () => {
  signupLock.checkSession({}, function(err, authResult) {
    if (err || !authResult?.accessToken) {
      console.log('登录状态失效')
      return
    }
    fetch('/test/', {
      headers: {
        'Authorization': `Bearer ${authResult.accessToken}`
      }
    })
    .then(response => response.json())
    .then(data => console.log(data));
  })
}

• 可以将获取到的Access Token存储在Redux或LocalStorage中，避免每次请求都调用checkSession降低性能
• 生产环境需要添加Token过期刷新逻辑，避免用户频繁重新登录
• 上线时需要关闭CORS_ALLOW_ALL_ORIGINS，改为指定可信的前端域名，避免安全风险

内容的提问来源于stack exchange，提问作者Tony Hoan Trinh