如何从React JS前端登录页登录Django Admin后台

你碰到的核心问题是：DRF接口里调用login()只是在当前请求的会话中标记了用户登录，但前端AJAX请求没正确处理Django的会话Cookie，导致跳转Django Admin时，浏览器没携带已登录的会话凭证，Admin页面识别不出用户身份。

Django Admin靠浏览器的sessionid Cookie维持登录状态，要是前端请求没配置允许携带凭证，或者跨域配置不对，会话Cookie就没法被浏览器保存和后续发送。

1. 前端请求开启凭证携带 #

React发POST登录请求时，必须加credentials: 'include'，让浏览器保存并携带Django的会话Cookie：

// React登录请求示例
fetch('http://你的DjangoAPI地址/login/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-CSRFToken': getCsrfToken() // 下面会说怎么获取这个值
  },
  credentials: 'include', // 关键配置
  body: JSON.stringify({
    username: '你的用户名',
    password: '你的密码'
  })
})

2. 跨域环境下配置Django的CORS #

如果React前端和Django不在同域名/端口，必须用django-cors-headers开启跨域凭证支持：

• 先安装：pip install django-cors-headers
• 然后在settings.py里加配置：

INSTALLED_APPS = [
    # ...
    'corsheaders',
    # ...
]

MIDDLEWARE = [
    # 必须放在CommonMiddleware前面
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # ...
]

# 允许你的前端域名
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000", # React默认端口，根据实际修改
]

# 允许携带凭证，必须开启
CORS_ALLOW_CREDENTIALS = True

3. 处理CSRF Token #

Django默认开启CSRF保护，前端要获取csrftoken Cookie并放到请求头里：

// 获取CSRF Token的函数
function getCsrfToken() {
  let cookieValue = null;
  if (document.cookie && document.cookie !== '') {
    const cookies = document.cookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
      const cookie = cookies[i].trim();
      if (cookie.startsWith('csrftoken=')) {
        cookieValue = decodeURIComponent(cookie.substring(10));
        break;
      }
    }
  }
  return cookieValue;
}

4. 确认Django会话中间件正常 #

检查settings.py的MIDDLEWARE里有没有这两个中间件，login()依赖它们生成会话Cookie：

MIDDLEWARE = [
    # ...
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    # ...
]

5. 正确跳转Admin #

前端收到登录成功的响应后，直接用window.location.href跳转到Admin地址，浏览器会自动带上sessionid Cookie，Admin就能识别已登录用户了：

// 登录成功后的跳转逻辑
fetch(/* ... */)
  .then(res => res.json())
  .then(data => {
    if (data.message === 'Logged in successfully') {
      window.location.href = 'http://你的DjangoAdmin地址/';
    }
  })

1. 登录请求发送完成后，在浏览器开发者工具的Application→Cookies里，确认存在sessionid和csrftoken两个Cookie
2. 跳转Admin时，查看网络请求的Request Headers，确认Cookie字段里包含sessionid
3. 若仍未解决，检查settings.py里的SESSION_COOKIE_DOMAIN，确保Cookie域名和Admin页面域名一致

内容的提问来源于stack exchange，提问作者Abdelrahman Hussein Mostafa