在 Django Rest Framework (DRF) 中使用 JWT (JSON Web Token) 进行认证时，前后端需要配合工作。下面是 DRF 使用 JWT 认证的一个基本流程。

后端部分

1. 安装必要的库：
   需要安装 djangorestframework 和 djangorestframework-simplejwt 两个库。后者是处理 JWT 的工具。

   pip install djangorestframework djangorestframework-simplejwt
   

2. 配置 Django 项目：
   在 settings.py 文件中，添加 JWT 相关的配置。

   INSTALLED_APPS = [
       # 其他应用
       'rest_framework',
       'rest_framework_simplejwt',
   ]
   
   REST_FRAMEWORK = {
       'DEFAULT_AUTHENTICATION_CLASSES': (
           'rest_framework_simplejwt.authentication.JWTAuthentication',
       ),
   }
   
   # 可选：JWT 配置
   from datetime import timedelta
   SIMPLE_JWT = {
       'ACCESS_TOKEN_LIFETIME': timedelta(minutes=5),
       'REFRESH_TOKEN_LIFETIME': timedelta(days=1),
       'ROTATE_REFRESH_TOKENS': True,
       'BLACKLIST_AFTER_ROTATION': True,
   }
   

3. 创建获取 JWT Token 的视图：
   你可以使用 SimpleJWT 提供的现成的视图来生成 token 和刷新 token。

   在 urls.py 中配置 JWT 相关的路由：

   from django.urls import path
   from rest_framework_simplejwt.views import (
       TokenObtainPairView,
       TokenRefreshView,
   )
   
   urlpatterns = [
       # 获取 JWT Token
       path('api/token/', TokenObtainPairView.as_view(), name='token_obtain_pair'),
       # 刷新 JWT Token
       path('api/token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
   ]
   

4. 受保护的视图：
   对于需要认证的视图，你可以使用 DRF 的权限系统来确保这些视图只能通过有效的 JWT token 访问。

   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": "This is a protected view."})
   

前端部分

前端负责与后端进行交互，发送请求获取 JWT token，并使用 token 访问受保护的 API。

1. 发送登录请求获取 Token：
   用户登录时，前端需要发送用户的凭据（如用户名和密码）到后端的 /api/token/ 端点。

   async function login(username, password) {
       const response = await fetch('http://localhost:8000/api/token/', {
           method: 'POST',
           headers: {
               'Content-Type': 'application/json',
           },
           body: JSON.stringify({
               username: username,
               password: password,
           }),
       });
       const data = await response.json();
       if (response.ok) {
           // 保存 Access Token 和 Refresh Token
           localStorage.setItem('access_token', data.access);
           localStorage.setItem('refresh_token', data.refresh);
       } else {
           console.log('Login failed:', data);
       }
   }
   

2. 使用 Token 访问受保护的资源：
   前端在访问受保护的 API 时，需要将 JWT Access Token 放到请求的 Authorization 头中。

   async function getProtectedResource() {
       const token = localStorage.getItem('access_token');
       const response = await fetch('http://localhost:8000/protected/', {
           method: 'GET',
           headers: {
               'Authorization': `Bearer ${token}`,
           },
       });
   
       if (response.ok) {
           const data = await response.json();
           console.log('Protected data:', data);
       } else {
           console.log('Failed to access protected resource');
       }
   }
   

3. 刷新 Token：
   当 Access Token 过期时，可以使用 Refresh Token 获取新的 Access Token。前端需要定期检查 token 是否过期，并在必要时进行刷新。

   async function refreshToken() {
       const refreshToken = localStorage.getItem('refresh_token');
       const response = await fetch('http://localhost:8000/api/token/refresh/', {
           method: 'POST',
           headers: {
               'Content-Type': 'application/json',
           },
           body: JSON.stringify({
               refresh: refreshToken,
           }),
       });
       const data = await response.json();
       if (response.ok) {
           // 更新 Access Token
           localStorage.setItem('access_token', data.access);
       } else {
           console.log('Failed to refresh token:', data);
       }
   }
   

总结

1. 后端使用 djangorestframework-simplejwt 处理 JWT 认证，配置好相关路由和权限保护。
2. 前端通过登录接口获取 access_token 和 refresh_token，然后在调用受保护 API 时，在请求头中携带 Bearer access_token。
3. 当 access_token 过期时，前端可以使用 refresh_token 获取新的 access_token。

这样，前后端就可以通过 JWT 来实现安全的认证和授权流程。