Vue + Django 2.0.6 学习笔记 7.12-13信号量实现用户密码修改，vue和注册功能联调

本文主要是介绍Vue + Django 2.0.6 学习笔记 7.12-13信号量实现用户密码修改，vue和注册功能联调，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

首先先设置queryset字段

# users/views.pyclass UserViewset(CreateModelMixin, viewsets.GenericViewSet):queryset = User.objects.all()

测试注册的时候出现该错误

报这个错的原因是

我们配置的字段是fields = ("username", "code", "mobile", "password")

但是我们在代码中已经删掉了code字段。所以 返回的时候是将这几个字段都序列化返回到前端的

# 继承关系from rest_framework.mixins import CreateModelMixinclass UserViewset(CreateModelMixin, viewsets.GenericViewSet):
class CreateModelMixin:# 看截图

所以我们需要在自定义的字段校验中加入write_only= True

class UserRegSerializer(serializers.ModelSerializer):code = serializers.CharField(required=True, max_length=4, min_length=4, write_only=True, label='验证码',error_messages={"blank":"请输入验证码","required":"请输入验证码","max_length":"验证码格式错误","min_length":"验证码格式错误"},help_text="验证码")

设置rest_api接口测试页面的密码输入为password类型：

password = serializers.CharField(# 返回的时候也不显示密码 style={'input_type': 'password'}, label='密码', write_only=True)

效果

接下来的问题：

密码明文存储

正常情况下 ModelSerializer是明文存储密码的 所以需要自定义pasword的存储

那怎么搞？

重写create函数
from rest_framework import serializers / Serializer / BaseSerializer def create(self, validated_data):user = super(UserRegSerializer, self).create(validated_data=validated_data)user.set_password(validated_data['password'])user.save()return user

如果觉得这样写 改变了框架代码  可以这么干

使用信号量机制

参考文档

django:

https://docs.djangoproject.com/en/1.10/ref/signals/

rest_framework:

https://www.django-rest-framework.org/api-guide/authentication/#generating-tokens

类似于QT的信号槽  Vue的父子组件信号传递

 

使用方法

# 在usersapp下新建signals.pyfrom django.db.models.signals import post_save
from django.dispatch import receiver
from rest_framework.authtoken.models import Token
from django.contrib.auth import get_user_modelUser = get_user_model()#第一个参数是信号量名称， 第二个是哪个model接收信号
@receiver(post_save, sender=User)
def create_auth_token(sender, instance=None, created=False, **kwargs):# 判断是否新建if created:password = instance.passwordinstance.set_password(password)instance.save()

然后在apps.py中添加

from django.apps import AppConfigclass UsersConfig(AppConfig):name = 'users'verbose_name = '用户'def ready(self):import users.signals

在前端注册成功后会有两种机制

一种是需要用户登录 一种是自动登录转主页

第一种不说 直接跳转主页就可以了

第二种需要token 

所以如果是第二种我们就需要返回token给前端

实现：

 

# 重写CreateModelMixin/create函数# 原始函数的代码class CreateModelMixin(object):"""Create a model instance."""def create(self, request, *args, **kwargs):serializer = self.get_serializer(data=request.data)serializer.is_valid(raise_exception=True)self.perform_create(serializer)headers = self.get_success_headers(serializer.data)return Response(serializer.data, status=status.HTTP_201_CREATED, headers=headers)def perform_create(self, serializer):serializer.save()

这里的perform中的save是save了当前的model（user）。但是并没有返回该model。我们要想获取到user model 就必须重写让它返回model

然后在执行perform_create之后插入我们自己的逻辑。

分析jwt的源码实现，找到它哪部分才是生成token的。

- 从url入口。点进obtain_jwt_token

path('login/', obtain_jwt_token )obtain_jwt_token = ObtainJSONWebToken.as_view()class ObtainJSONWebToken(JSONWebTokenAPIView):"""API View that receives a POST with a user's username and password.Returns a JSON Web Token that can be used for authenticated requests."""serializer_class = JSONWebTokenSerializer

此时我们就可以去查看继承的父类: JSONWebTokenAPIView

该类中用户在post数据过来之后。

 def post(self, request, *args, **kwargs):serializer = self.get_serializer(data=request.data)if serializer.is_valid():user = serializer.object.get('user') or request.usertoken = serializer.object.get('token')response_data = jwt_response_payload_handler(token, user, request)response = Response(response_data)if api_settings.JWT_AUTH_COOKIE:expiration = (datetime.utcnow() +api_settings.JWT_EXPIRATION_DELTA)response.set_cookie(api_settings.JWT_AUTH_COOKIE,token,expires=expiration,httponly=True)return responsereturn Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

关键在于token是直接从Serializer中获取的，那么token的生成应该是在Serializer中实现的。

token = serializer.object.get('token')

寻找我们的Serializer

serializer = self.get_serializer(data=request.data)def get_serializer(self, *args, **kwargs):serializer_class = self.get_serializer_class()return self.serializer_class

Serializer位于rest_framework_jwt/views.py的ObtainJSONWebToken类中

serializer_class = JSONWebTokenSerializer

                payload = jwt_payload_handler(user)return {'token': jwt_encode_handler(payload),'user': user}

调用了jwt_encode_handler， 而该handler是api_setting中设置的

jwt_payload_handler = api_settings.JWT_PAYLOAD_HANDLER
jwt_encode_handler = api_settings.JWT_ENCODE_HANDLER

rest_framework_jwt/settings.py:

DEFAULTS = {'JWT_ENCODE_HANDLER':'rest_framework_jwt.utils.jwt_encode_handler','JWT_PAYLOAD_HANDLER':'rest_framework_jwt.utils.jwt_payload_handler',}

所以我们已经找到了生成token的两个重要步骤，一payload，二encode

实现代码:

    def create(self, request, *args, **kwargs):serializer = self.get_serializer(data=request.data)serializer.is_valid(raise_exception=True)user = self.perform_create(serializer)re_dict = serializer.datapayload = jwt_payload_handler(user)re_dict["token"] = jwt_encode_handler(payload)re_dict['name'] = user.name if user.name else user.usernameheaders = self.get_success_headers(serializer.data)return Response(re_dict, status=status.HTTP_201_CREATED, headers=headers)

其中的token要和前端保持一致。注意将原本返回的Serializer.data进行加工之后返回。

 

退出功能：

// Vue中 login.ue
<a @click="loginOut">退出</a>// head.vueloginOut(){cookie.delCookie('token');cookie.delCookie('name');this.$store.dispatch('setInfo');// this.$http.get('/getMenu')//     .then((response)=> {//跳转到登录this.$router.push({ name: 'login' })//     })//     .catch(function (error) {//       console.log(error);// });},

清空token给axios发一个通知。跳转到登录页面。

第七章完结 内容多 且比较绕 估计以后要回来重新瞅好几次

完结

部分内容参考天涯明月笙大佬 https://blog.csdn.net/qq_23079443 

这篇关于Vue + Django 2.0.6 学习笔记 7.12-13信号量实现用户密码修改，vue和注册功能联调的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---