使用axios请求登录到Django rest_framework_simplejwt生成token并返回

简介

在现代的Web应用程序中，用户认证和授权是非常重要的功能。Django是一个流行的Python Web框架，而Django rest_framework_simplejwt是一个用于Django的简单JSON Web Token（JWT）身份验证插件。本文将向您展示如何使用axios库从前端发送登录请求到Django服务器，并使用rest_framework_simplejwt生成和返回JWT令牌。

状态图

stateDiagram
    [*] --> 登录
    登录 --> 生成令牌
    生成令牌 --> 返回令牌
    返回令牌 --> [*]

准备工作

在开始之前，需要确保您已经安装了以下组件：

  • Django：用于构建Web应用程序的Python Web框架。
  • django-rest-framework：用于构建RESTful API的Django扩展。
  • djangorestframework-simplejwt：用于生成和验证JSON Web Token的Django扩展。
  • axios：用于发送HTTP请求的JavaScript库。

您可以使用以下命令安装这些组件：

pip install Django
pip install djangorestframework
pip install djangorestframework_simplejwt

在您的Django项目中，确保已经进行了以下配置：

  • 在Django的settings.py文件中，将'rest_framework'和'rest_framework_simplejwt'添加到INSTALLED_APPS。
  • 在settings.py文件中，将rest_framework的认证类设置为rest_framework_simplejwt的Token认证类。
  • 在urls.py文件中，将rest_framework的路由添加到Django项目中。

编写前端代码

首先，我们将编写前端代码，使用axios发送登录请求到Django服务器。在您的HTML文件中，添加以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
    <script src="
</head>
<body>
    Login
    <form id="login-form">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username"><br><br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password"><br><br>
        <button type="submit">Login</button>
    </form>

    <script>
        const form = document.getElementById('login-form');
        form.addEventListener('submit', function(event) {
            event.preventDefault();
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;

            axios.post('http://localhost:8000/api/token/', {
                username: username,
                password: password
            }).then(function(response) {
                const token = response.data.access;
                // 在这里可以将令牌保存到本地存储或cookie中
                console.log('Token:', token);
            }).catch(function(error) {
                console.error('Login failed:', error);
            });
        });
    </script>
</body>
</html>

在上面的代码中，我们创建了一个简单的登录表单，其中包含用户名和密码字段。当用户提交表单时，我们使用axios发送POST请求到Django服务器上的'/api/token/'端点。请求的正文包含用户名和密码。成功的响应将包含一个名为"access"的属性，其中包含生成的JWT令牌。

编写后端代码

接下来，我们将编写Django的后端代码以处理登录请求并生成JWT令牌。在您的Django项目的views.py文件中，添加以下代码：

from rest_framework_simplejwt.views import TokenObtainPairView

class MyTokenObtainPairView(TokenObtainPairView):
    serializer_class = MyTokenObtainPairSerializer

上面的代码创建了一个自定义的TokenObtainPairView视图类，并设置了其serializer_class属性为自定义的序列化器。

然后，创建一个名为serializers.py的文件，并添加以下代码：

from rest_framework_simplejwt.serializers import TokenObtainPairSerializer

class MyTokenObtainPairSerializer(TokenObtainPairSerializer):
    def validate(self, attrs):
        data = super().validate(attrs)
        # 在这里可以自定义响应数据
        return data

上面的代码创建了一个自定义的TokenObtainPairSerializer序列化器类，并重写了validate方法以自定义响应数据。

在您的Django项目的urls.py文件中，添加以下代码：

from django.urls import path
from .views import MyTokenObtain