React Native与Django CBV LoginView实现认证的正确方式

一、直接使用Django原生LoginView的方式 #

Django原生LoginView确实可以直接接收POST请求完成认证，但需要注意移动端适配的细节：

• 核心逻辑：LoginView默认处理application/x-www-form-urlencoded格式的POST请求，接收username和password两个字段，验证通过后会设置Session和CSRF Cookie。
• 关键注意点：
  • 跨域配置：需在Django中启用django-cors-headers，允许React Native客户端的域名，并配置允许携带Cookie（CORS_ALLOW_CREDENTIALS = True）。
  • CSRF Token处理：先发送GET请求到/login，从响应头或Cookie中获取CSRF Token，再在POST请求的X-CSRFToken头中携带该值。
  • Cookie持久化：React Native请求需设置credentials: 'include'，自动保存Session Cookie，后续请求携带Cookie即可保持登录状态。
• React Native端示例代码：

// 获取CSRF Token
const fetchCsrfToken = async () => {
  const res = await fetch('https://your-django-domain/login', {
    method: 'GET',
    credentials: 'include'
  });
  return res.headers.get('X-CSRFToken');
};

// 登录请求
const login = async (username, password) => {
  const csrfToken = await fetchCsrfToken();
  const res = await fetch('https://your-django-domain/login', {
    method: 'POST',
    credentials: 'include',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'X-CSRFToken': csrfToken
    },
    body: new URLSearchParams({ username, password })
  });

  if (res.ok) {
    console.log('登录成功');
  } else {
    const error = await res.text();
    console.error('登录失败:', error);
  }
};

二、使用DRF编写API的方式（更推荐移动端场景） #

对于React Native这类前后端分离的移动端应用，DRF的认证方案更适配：

• 优势：DRF支持Token、JWT等无状态认证方式，无需依赖Session Cookie，移动端管理Token比Cookie更灵活，还能轻松实现多设备登录、Token刷新等功能。
• 实现方式：
  • 可选使用DRF内置的ObtainAuthToken视图，或借助djangorestframework-simplejwt实现JWT认证。
  • React Native发送JSON格式的POST请求，携带username和password，后端返回Token。
  • 后续请求在Authorization头中携带Token <token>（或Bearer <token>）完成身份校验。
• React Native端示例代码（基于JWT）：

import AsyncStorage from '@react-native-async-storage/async-storage';

const login = async (username, password) => {
  try {
    const res = await fetch('https://your-django-domain/api/token/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username, password })
    });

    if (res.ok) {
      const { access, refresh } = await res.json();
      // 持久化Token
      await AsyncStorage.setItem('access_token', access);
      await AsyncStorage.setItem('refresh_token', refresh);
      console.log('登录成功');
    } else {
      const error = await res.json();
      console.error('登录失败:', error);
    }
  } catch (err) {
    console.error('请求异常:', err);
  }
};

方案选择建议 #

• 若项目架构简单、仅需基础认证功能，可直接使用Django原生LoginView。
• 若为标准前后端分离的移动端应用，优先选择DRF的Token/JWT方案，适配性和扩展性更强。

内容的提问来源于stack exchange，提问作者Patryk Opiela