Django drf jwt token认证前后端使用流程

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

后端部分

安装必要的库：

需要安装 djangorestframework 和 djangorestframework-simplejwt 两个库。后者是处理 JWT 的工具。
bash 复制代码
```
pip install djangorestframework djangorestframework-simplejwt
```

配置 Django 项目：

在 settings.py 文件中，添加 JWT 相关的配置。

python 复制代码

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,
}

创建获取 JWT Token 的视图：

你可以使用 SimpleJWT 提供的现成的视图来生成 token 和刷新 token。

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

python 复制代码

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'),
]

受保护的视图：

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

python 复制代码

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。

发送登录请求获取 Token：

用户登录时，前端需要发送用户的凭据（如用户名和密码）到后端的 /api/token/ 端点。

javascript 复制代码

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);
    }
}

使用 Token 访问受保护的资源：

前端在访问受保护的 API 时，需要将 JWT Access Token 放到请求的 Authorization 头中。

javascript 复制代码

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');
    }
}

刷新 Token：

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

javascript 复制代码

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);
    }
}

总结

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

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