Django Rest Framework + Serializers + Vue.js，重置密码功能 [英] Django Rest Framework + Serializers + Vue.js, Reset Password Functionality

问题描述

我正在尝试创建重置密码功能，但我找不到一个很好的教程来解释如何使用 DRF 和 Vue.js 做到这一点.我正在使用序列化程序来传递数据，因此不涉及 html 视图.创建重置密码功能的最有效方法是什么?

I am trying to create a reset password functionality, but I can't find a good tutorial that explains how to do that with DRF and Vue.js. I am using serializers to pass the data, so there are no html views involved. What is the most efficient way of creating that Reset Password Functionality?

我正在通过/api/v1/users/创建新用户.

I am creating new users via /api/v1/users/.

这个想法是通过电子邮件发送一个链接，该链接指向 ResetPassword.vue(不太了解如何做到这一点，也找不到很好的教程)，用户输入新密码并按下提交后被重定向到 Login.vue.

The idea is to send a link via email that leads to ResetPassword.vue (Don't really understand how to do that, can't find good tutorial on that neither) where the user inputs the new password and after pressing submit is redirected to Login.vue.

任何想法都非常受欢迎.谢谢！

Any ideas are very appretiated. Thank you!

推荐答案

在尝试并发明了不同的选项后，我设法找到了最有效的一个.基本上，如果您使用的是 Django Rest Framework Auth 令牌，则在您的数据库中，您将有一个包含 Key:(这里是用户的令牌)和 Name:(这里是用户的名称)的表.因此，您创建了一个只有带有电子邮件输入和发送按钮的表单的视图.您收到电子邮件，使用 Axios 将其发布到后端，这是您将要管理的视图:

After trying out and inventing different options, I managed to find one that works the best. Basically, if you are using Django Rest Framework Auth token, in your database you will have a table that will hold Key: (here is user's token) and Name: (here is user's name). So, you create a view that will only have a form with email input and send button. You get the email, post it with Axios to backend and here is the View you will be managing:

@api_view(['POST', 'GET'])
def your_method_name_that_will_be_in_urls_py(request):
    if request.method == "POST":
        serializer = ResetPasswordEmail(data=request.data)
        if serializer.is_valid():

            //Here you get the email from Front-End
            email = serializer.validated_data['email']

            //Here you fin the user that has that email
            user = User.objects.get(email=email)

            //Here you get the token of that user
            token = Token.objects.get(user=user)

            if user:

                //Here you pass the context of things above to send them in an email
                context = {
                    'email': email,
                    'username': user,
                    'token': token
                }

                send_mail(
                    'SUBJECT',
                    render_to_string('emails/reset_password.txt', context),
                    'COMPANY NAME and No Reply',
                    [email],
                    fail_silently=False,
                    auth_user=None, auth_password=None, connection=None, html_message=None
                )
                serializer.save(token=token, slug=token)

            return Response(serializer.data, status=status.HTTP_201_CREATED)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

还有像这样的序列化器:

And the Serializer like this one:

class ResetPasswordEmail(serializers.ModelSerializer):
    class Meta:
        model = ResetPassword
        fields = (
            'email',
        )

此外，我为该密码重置创建了一个模型:

Also, I created a model for that Password Reset:

class ResetPassword(models.Model):
    email = models.CharField(max_length=200, null=True)
    token = models.CharField(max_length=255, null=True)
    slug = models.SlugField(max_length=255)

    def __str__(self):
        return self.token
    //This thing creates users personalized link, that they visit and have a enter new password view in Front-End.
    def get_absolute_url(self):
        return f'/{self.token}/'

这篇关于Django Rest Framework + Serializers + Vue.js，重置密码功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！