如何在无React等前端的纯Django项目中实现JWT Token认证

当然可以在不依赖前端框架的纯Django项目中实现JWT认证，下面是具体的实现思路和参考资源：

一、核心实现思路 #

1. 选用成熟的JWT库 #

推荐使用djangorestframework-simplejwt，它是Django REST Framework（DRF）的扩展，而DRF本身是Django的后端扩展，完全符合纯Django项目的需求，无需引入任何前端库。

安装命令：

pip install djangorestframework-simplejwt

2. 项目配置 #

• 在settings.py的INSTALLED_APPS中添加：

  INSTALLED_APPS = [
      # 其他已有的APP
      'rest_framework',
      'rest_framework_simplejwt',
  ]
  

• 配置DRF的默认认证类：

  REST_FRAMEWORK = {
      'DEFAULT_AUTHENTICATION_CLASSES': (
          'rest_framework_simplejwt.authentication.JWTAuthentication',
      ),
  }
  

• 自定义JWT参数（可选）：

  from datetime import timedelta
  
  SIMPLE_JWT = {
      'ACCESS_TOKEN_LIFETIME': timedelta(minutes=15),
      'REFRESH_TOKEN_LIFETIME': timedelta(days=1),
  }
  

3. 配置路由 #

在项目的urls.py中添加Token相关路由：

from rest_framework_simplejwt.views import (
    TokenObtainPairView,
    TokenRefreshView,
)

urlpatterns = [
    # 其他已有路由
    path('api/token/', TokenObtainPairView.as_view(), name='token_obtain_pair'),
    path('api/token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
]

4. 保护视图 #

对于需要认证的视图，添加权限控制：

from rest_framework.permissions import IsAuthenticated
from rest_framework.views import APIView
from rest_framework.response import Response

class ProtectedView(APIView):
    permission_classes = [IsAuthenticated]

    def get(self, request):
        return Response({'message': f'欢迎，{request.user.username}！'})

5. 纯Django模板中的Token交互 #

在登录模板中，用原生JavaScript处理Token的获取和携带：

<!-- 登录表单 -->
<form id="loginForm">
    <input type="text" name="username" placeholder="用户名">
    <input type="password" name="password" placeholder="密码">
    <button type="submit">登录</button>
</form>

<script>
document.getElementById('loginForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    const response = await fetch('/api/token/', {
        method: 'POST',
        body: formData
    });
    const data = await response.json();
    if (response.ok) {
        // 存储Token到localStorage
        localStorage.setItem('access_token', data.access);
        localStorage.setItem('refresh_token', data.refresh);
        // 跳转到受保护页面
        window.location.href = '/protected/';
    } else {
        alert('登录失败：' + data.detail);
    }
});

// 后续请求携带Token
async function fetchProtectedData() {
    const token = localStorage.getItem('access_token');
    const response = await fetch('/protected/', {
        headers: {
            'Authorization': `Bearer ${token}`
        }
    });
    const data = await response.json();
    console.log(data);
}
</script>

二、参考资源 #

• 视频教程：可搜索国内视频平台上的「纯Django JWT认证实现」类教程，这类视频通常会从环境搭建、配置到模板交互做完整演示。
• 示例项目：可在代码托管平台搜索「django-jwt-simple-example」，找到纯Django环境下的JWT实现项目，重点参考配置文件、路由设置和模板中的JS逻辑。

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