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

左手的ㄟ右手 2022-01-15 18:17 239阅读 0赞

首先先设置queryset字段

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70][]

报这个错的原因是

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70 1][]

所以我们需要在自定义的字段校验中加入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
        )

效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70 2][]

接下来的问题：

密码明文存储

正常情况下 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/][https_docs.djangoproject.com_en_1.10_ref_signals]

rest\_framework:

[https://www.django-rest-framework.org/api-guide/authentication/\#generating-tokens][https_www.django-rest-framework.org_api-guide_authentication_generating-tokens]

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

使用方法

# 在usersapp下新建signals.py
    
    from 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_model
    
    User = get_user_model()
    
    #第一个参数是信号量名称， 第二个是哪个model接收信号
    @receiver(post_save, sender=User)
    def create_auth_token(sender, instance=None, created=False, **kwargs):
        # 判断是否新建
        if created:
            password = instance.password
            instance.set_password(password)
            instance.save()

然后在apps.py中添加

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

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

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

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

第二种需要token

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70 3][]

实现：

# 重写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.user
                token = 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 response
    
            return 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.data
            payload = jwt_payload_handler(user)
            re_dict["token"] = jwt_encode_handler(payload)
            re_dict['name'] = user.name if user.name else user.username
    
            headers = 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.vue
    
            loginOut(){
                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][https_blog.csdn.net_qq_23079443]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70]: /images/20220115/349fe73374b94da0a310c47461e4ec3b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70 1]: /images/20220115/9a72abe438ed4c57ba5e3d104fd3dc03.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70 2]: /images/20220115/5905395dba70431f90bce2389f22eb95.png
[https_docs.djangoproject.com_en_1.10_ref_signals]: https://docs.djangoproject.com/en/1.10/ref/signals/
[https_www.django-rest-framework.org_api-guide_authentication_generating-tokens]: https://www.django-rest-framework.org/api-guide/authentication/#generating-tokens
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70 3]: /images/20220115/70229aa7ed2b41d587d6951394d7fbc6.png
[https_blog.csdn.net_qq_23079443]: https://blog.csdn.net/qq_23079443