Django REST framework+Vue 打造生鮮電商項目（筆記四）

時間 2019-11-15

標籤 django rest framework+vue framework vue 打造項目筆記欄目 Python 简体版

原文原文鏈接

（PS：部分代碼和圖片來自博客:http://www.cnblogs.com/derek1184405959/p/8813641.html。有增刪）html

1、用戶登陸和手機註冊

一、drf的token功能

（前言：爲何有了session了，還要用token呢？由於每次認證用戶發起請求時，服務器須要去建立一個記錄來存儲信息。當愈來愈多的用戶發請求時，內存的開銷也會不斷增長。）
以前用django作的網站登陸都會加上csrf-token防止跨站攻擊，但這次的項目是先後端分離的，並且用戶能夠選擇在手機上登錄，就不能限制跨站登錄了。而一開始咱們建立超級用戶後，爲何能夠登陸drf？是由於咱們在urls.py配置了"path('api-auth/', include('rest_framework.urls')),"，點進去查看源碼，以下：前端

能夠知道drf用的登錄仍是基於csrf的模式，所以這裏就不合適咱們這個先後端分離的項目。所以咱們須要用其餘的用戶認證模式，這些在drf的官方文檔裏都有說明，drf提供給咱們的auth有三種。vue

首先在setting.py中配置（不填寫也會默認配置）ios

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework.authentication.BasicAuthentication',
        'rest_framework.authentication.SessionAuthentication',#瀏覽器中經常使用這種機制，由於瀏覽器會自動生成cookie和session返回給後端。但在先後端分離系統中不多用這個
    )
}

二、開始配置token

（1）INSTALL_APP中添加web

INSTALLED_APPS = (
    ...
    'rest_framework.authtoken'
)

token會生成一張表authtoken_token，因此要運行migrations和migrate正則表達式

表的做用：咱們如今用的是token的認證模式，在這張表中，只要建立了一個新的用戶，就會生成一個與用戶對應的token數據庫

（2）url配置django

from rest_framework.authtoken import views


urlpatterns = [
    # token
    path('api-token-auth/', views.obtain_auth_token)
]

（3）這時咱們能夠用瀏覽器Firefox，安裝個插件Httprequest，來模仿登錄，測試一下這個接口json

如圖，輸入接口url，在下方用json格式寫上咱們要註冊的用戶名和密碼，用POST方式，就可得到生成返回的token。axios

token值會保存到數據中，跟這個用戶相關聯

（4）客戶端身份驗證

在後端生成token後，並返回給前端，接下來就是前端要怎麼利用這個token值了。（就是帶上token值，模擬用戶登陸）

Authorization: Token 9944b09199c62bcf9418ad846dd0e4bbdfc6ee4b # 注意Token後面的空格

測試方法就是點擊插件的Headers，按上面我寫的那樣要求，填入數據。

咱們要把token放在header裏面，其中key爲"Authorization"，"Token"和它的值爲value。但會發現debug模式下返回的用戶信息爲空

由於如今咱們用到了token的認證方式，若是想獲取用戶信息，就還要在setting.py裏配置一下：

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework.authentication.BasicAuthentication',
        'rest_framework.authentication.SessionAuthentication',
        'rest_framework.authentication.TokenAuthentication' # 新增
    )
}

這些配置的做用和setting.py裏面默認配置的

MIDDLEWARE = [
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.contrib.auth.middleware.AuthenticationMiddleware',
     ....
]

同樣，當request映射到views.py以前，django和drf會自動調用"SessionAuthentication"或"TokenAuthentication"等這些類裏面的authenticate方法，這種方法會把User放到request當中去。這三種方法(指的是"BasicAuthentication"、"SessionAuthentication"、"TokenAuthentication")是用戶不一樣類別的驗證，並且會逐一驗證，只要任意一種方法獲取到User，都會放到request裏面。

（小Tips：前端傳到後端的數據，都是保存在data裏面的，但token是保存在auth裏面，若是想要處理前端傳回來的token，就用request.auth取出來）

咳咳，接下來進入源（zhuang）碼（bi）分（bu）析（fen），不感興趣的能夠跳過這一部分。

首先爲何咱們在header裏面設置了token以後，經過request就能夠取到User了呢？先來分析一波django從請求到相應的過程。根據django源碼"site-packages/django/contrib/session/middleware.py"，如圖：

其中，在request響應到view以前，settings.py裏面的MIDDLEWARE = [...]全部的xxxMiddleware方法都會去重載這兩個方法（圖中我圈出來那個），固然每一個方法放在不一樣的包裏面，但方法名同樣。如今咱們只來分析SessionMiddleware，根據圖中代碼中的"def process_request(self, request)"方法，咱們知道它的做用就是把session放到request裏面而已。

(推薦下關於django從請求到響應的過程的文章:http://projectsedu.com/2016/10/17/django從請求到返回都經歷了什麼/)

這種「請求到達Request Middlewares，中間件對request作一些預處理或者直接response請求」的好處有好比咱們能夠自定義只有特定的瀏覽器才能夠訪問，做爲全局攔截器，咱們能夠自定義一個Middlewares，而後在「def process_request」方法裏判斷該是否爲chorm瀏覽器，若是不是就返回一個HttpResponce，這樣就不會進入view裏面。

總的來講，就是經過"def process_request"攔截cookies，放到request.session裏面。接下來還有一步，就是經過「contrib/auth/middleware.py」，如圖：

以上這些是django的MIDDLEWARE = []中的驗證。

實際上MIDDLEWARE = []和REST_FRAMEWORK = {}中的驗證不同，MIDDLEWARE會對每個request都作一個處理，而REST_FRAMEWORK中的'DEFAULT_AUTHENTICATION_CLASSES'是用來驗證用戶信息的。

接下來講說token，爲何在header加上token就能夠把User取出來呢？drf裏面的"rest_framework/authentication.py"的源碼以下：

通過一系列判斷處理以後，會拿到token值，而後傳給「def authenticate_credentials(self, key)」方法

可是咱們最開始登錄註冊的時候，這張表是空表，那這個token是如何填充進來的呢？這時要從urls.py裏面去看

點進去查看，

以上，就是token實現過程的流程。

drf的token缺點

保存在數據庫中，若是是一個分佈式的系統，就很是麻煩
token永久有效，沒有過時時間。（固然能夠設定有效時間）

（這裏還有個小坑，就是咱們配置token是在全局的狀況下的。當token無效或者填錯的時候，會返回一個401的錯誤，原本這個是沒什麼問題的，可是當咱們訪問的是商品的列表頁，這種是用戶在登錄和未登陸的狀況下均可以訪問的，若是這時咱們由於token過時無效等狀況而返回401錯誤會顯得很奇怪。這個問題後端的解決辦法能夠是取消全局配置，而後在view裏面導入from rest_framework.authentication import TokenAuthentication 在須要進行token認證的class裏面寫上 authentication_classes = (TokenAuthentication, )）

2、json web token（jwt）方式完成用戶認證

（jwt介紹：https://www.jianshu.com/p/180a870a308a、https://ruiming.me/authentication-of-frontend-backend-separate-application/）

一、jwt的基本使用

（1）安裝

pip install djangorestframework-jwt

（2）使用

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework.authentication.BasicAuthentication',
        'rest_framework.authentication.SessionAuthentication',
        'rest_framework_jwt.authentication.JSONWebTokenAuthentication',
    )
}

（3）url

# jwt的token認證接口
path('jwt-auth/', obtain_jwt_token )

（4）Httprequest

Now in order to access protected api urls you must include the Authorization: JWT <your_token> header.

$ curl -H "Authorization: JWT <your_token>" http://localhost:8000/protected-url/

二、vue和jwt接口調試

vue中登陸接口是login

//登陸
export const login = params => {
  return axios.post(`${local_host}/login/`, params)
}

後臺的接口跟前端要一致

urlpatterns = [
    # jwt的認證接口
    path('login/', obtain_jwt_token )
]

如今就能夠登陸了

jwt接口它默認採用的是Django的auth進行用戶名和密碼登陸驗證，若是用手機號碼登陸的話，就會驗證失敗，由於默認只能夠驗證username和password，因此咱們須要自定義一個用戶驗證，讓它能夠知足手機號碼驗證等需求

自定義用戶認證

（1）settings中配置

AUTHENTICATION_BACKENDS = (
    'users.views.CustomBackend',

)

（2）users/views.py

# users.views.py

from django.contrib.auth.backends import ModelBackend
from django.contrib.auth import get_user_model
from django.db.models import Q

User = get_user_model()

class CustomBackend(ModelBackend):
    """
    自定義用戶驗證
    """
    def authenticate(self, username=None, password=None, **kwargs):
        try:
            #用戶名和手機都能登陸
            user = User.objects.get(
                Q(username=username) | Q(mobile=username))
            if user.check_password(password):
                return user
        except Exception as e:
            return None

（3）JWT有效時間設置

settings中配置

import datetime
#有效期限
JWT_AUTH = {
    'JWT_EXPIRATION_DELTA': datetime.timedelta(days=7),    #也能夠設置seconds=20
    'JWT_AUTH_HEADER_PREFIX': 'JWT',                       #JWT跟前端保持一致，好比「token」這裏設置成JWT
}

三、雲片網發送短信驗證碼

（1）註冊

「開發認證」-->>「簽名管理」-->>「模板管理」

還要添加iP白名單，測試就用本地ip，部署的時候必定要換成服務器的ip

（2）發送驗證碼

apps下新建utils文件夾。再新建yunpian.py，代碼以下：

# apps/utils/yunpian.py

import requests
import json

class YunPian(object):

    def __init__(self, api_key):
        self.api_key = api_key
        self.single_send_url = "https://sms.yunpian.com/v2/sms/single_send.json"

    def send_sms(self, code, mobile):
        #須要傳遞的參數
        parmas = {
            "apikey": self.api_key,
            "mobile": mobile,
            "text": "【慕雪生鮮超市】您的驗證碼是{code}。如非本人操做，請忽略本短信".format(code=code)
        }

        response = requests.post(self.single_send_url, data=parmas)
        re_dict = json.loads(response.text)
        return re_dict

if __name__ == "__main__":
    #例如：9b11127a9701975c734b8aee81ee3526
    yun_pian = YunPian("2e87d1xxxxxx7d4bxxxx1608f7c6da23exxxxx2")
    yun_pian.send_sms("2018", "手機號碼")

四、drf實現發送短信驗證碼接口

手機號驗證：

是否合法
是否已經註冊

（1）settings.py

# 手機號碼正則表達式
REGEX_MOBILE = "^1[358]\d{9}$|^147\d{8}$|^176\d{8}$"

（2）users下新建serializers.py,代碼以下：

注意，這裏對手機號碼的驗證代碼中，爲何SmsSerializer不直接用ModelSerializer繼承 VerifyCode呢？是由於在 VerifyCode裏面code是必填字段，而咱們這裏只對mobile進行驗證

# users/serializers.py

import re
from datetime import datetime, timedelta
from MxShop.settings import REGEX_MOBILE
from users.models import VerifyCode
from rest_framework import serializers
from django.contrib.auth import get_user_model
User = get_user_model()


class SmsSerializer(serializers.Serializer):
    mobile = serializers.CharField(max_length=11)
    
    #函數名必須：validate + 驗證字段名
    def validate_mobile(self, mobile):
        """
        手機號碼驗證
        """
        # 是否已經註冊
        if User.objects.filter(mobile=mobile).count():
            raise serializers.ValidationError("用戶已經存在")

        # 是否合法
        if not re.match(REGEX_MOBILE, mobile):
            raise serializers.ValidationError("手機號碼非法")

        # 驗證碼發送頻率
        #60s內只能發送一次
        one_mintes_ago = datetime.now() - timedelta(hours=0, minutes=1, seconds=0)
        if VerifyCode.objects.filter(add_time__gt=one_mintes_ago, mobile=mobile).count():
            raise serializers.ValidationError("距離上一次發送未超過60s")

        return mobile

（3）APIKEY加到settings裏面

#雲片網APIKEY
APIKEY = "xxxxx327d4be01608xxxxxxxxxx"

（4）views後臺邏輯

咱們要重寫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()

    def get_success_headers(self, data):
        try:
            return {'Location': str(data[api_settings.URL_FIELD_NAME])}
        except (TypeError, KeyError):
            return {}

須要加上本身的邏輯

users/views.py

from rest_framework.mixins import CreateModelMixin
from rest_framework import viewsets
from .serializers import SmsSerializer
from rest_framework.response import Response
from rest_framework import status
from utils.yunpian import YunPian
from MxShop.settings import APIKEY
from random import choice
from .models import VerifyCode


# 對VerifyCode的操做，如發送一條驗證碼就把手機號碼和驗證碼保存在表裏，至關於
# create操做，因此要繼承CreateModelMixin
class SmsCodeViewset(CreateModelMixin,viewsets.GenericViewSet):
    '''
    手機驗證碼
    '''
    serializer_class = SmsSerializer # "serializer_class"是固定的，這樣寫，結合下面的"def create()"方法，就會自動進行驗證

    def generate_code(self):
        """
        生成四位數字的驗證碼
        """
        seeds = "1234567890"
        random_str = []
        for i in range(4):
            random_str.append(choice(seeds))

        return "".join(random_str)

    def create(self, request, *args, **kwargs):
        serializer = self.get_serializer(data=request.data)
        #驗證合法
        serializer.is_valid(raise_exception=True)

        mobile = serializer.validated_data["mobile"]

        yun_pian = YunPian(APIKEY)
        #生成驗證碼
        code = self.generate_code()

        sms_status = yun_pian.send_sms(code=code, mobile=mobile)

        if sms_status["code"] != 0:
            return Response({
                "mobile": sms_status["msg"]
            }, status=status.HTTP_400_BAD_REQUEST)
        else:
            code_record = VerifyCode(code=code, mobile=mobile)
            code_record.save()
            return Response({
                "mobile": mobile
            }, status=status.HTTP_201_CREATED)

雲片網單條短信發送的使用說明：

（5）配置url

from users.views import SmsCodeViewset

# 配置codes的url
router.register(r'code', SmsCodeViewset, base_name="code")

開始驗證

五、user serializer 和validator驗證

完成註冊的接口

（1）修改UserProfile中mobile字段

mobile = models.CharField("電話",max_length=11,null=True, blank=True)

設置容許爲空，由於前端只有一個值，是username，因此mobile能夠爲空

（2）users/serializers.py

注意：這裏使用的是「ModelSerializer」，跟上面的「SmsSerializer」繼承「Serializers」不同，雖然UserProfile裏面也沒有code字段，但這裏主要介紹的是當使用「ModelSerializer」時的解決辦法

class UserRegSerializer(serializers.ModelSerializer):
    '''
    用戶註冊
    '''
    #UserProfile中沒有code字段，這裏須要自定義一個code序列化字段
    code = serializers.CharField(required=True, write_only=True, max_length=4, min_length=4,
                                 error_messages={
                                        "blank": "請輸入驗證碼",
                                        "required": "請輸入驗證碼",
                                        "max_length": "驗證碼格式錯誤",
                                        "min_length": "驗證碼格式錯誤"
                                 },
                                help_text="驗證碼")
    #驗證用戶名是否存在
    username = serializers.CharField(label="用戶名", help_text="用戶名", required=True, allow_blank=False,
                                     validators=[UniqueValidator(queryset=User.objects.all(), message="用戶已經存在")])

    #驗證code
    def validate_code(self, code):
        # 用戶註冊，已post方式提交註冊信息，post的數據都保存在initial_data裏面
        #username就是用戶註冊的手機號，驗證碼按添加時間倒序排序，爲了後面驗證過時，錯誤等
        verify_records = VerifyCode.objects.filter(mobile=self.initial_data["username"]).order_by("-add_time")

        if verify_records:
            # 最近的一個驗證碼
            last_record = verify_records[0]
            # 有效期爲五分鐘。
            five_mintes_ago = datetime.now() - timedelta(hours=0, minutes=5, seconds=0)
            if five_mintes_ago > last_record.add_time:
                raise serializers.ValidationError("驗證碼過時")

            if last_record.code != code:
                raise serializers.ValidationError("驗證碼錯誤")

        else:
            raise serializers.ValidationError("驗證碼錯誤")

        # 全部字段。attrs是字段驗證合法以後返回的總的dict
    def validate(self, attrs):
        #前端沒有傳mobile值到後端，這裏添加進來
        attrs["mobile"] = attrs["username"]
        #code是本身添加得，數據庫中並無這個字段，驗證完就刪除掉
        del attrs["code"]
        return attrs

    class Meta:
        model = User
        fields = ('username','code','mobile') # 由於User指的就是Userprofile，而Userprofile繼承自Django的User，因此這裏username是必填字段

（3）users/views.py

class UserViewset(CreateModelMixin,viewsets.GenericViewSet):
    '''
    用戶
    '''
    serializer_class = UserRegSerializer

（4）配置url

router.register(r'users', UserViewset, base_name="users")

測試代碼：

六、django信號量實現用戶密碼修改

（1）完善用戶註冊

user/views.py

class UserViewset(CreateModelMixin,viewsets.GenericViewSet):
    '''
    用戶
    '''
    serializer_class = UserRegSerializer
    queryset = User.objects.all()

user/serializer.py添加

fields = ('username','code','mobile','password')

（2）password不能明文顯示和加密保存

須要重載Create方法

# 「write_only=True」，不會返回到前端
password = serializers.CharField(
    style={'input_type': 'password'},label=「密碼」,write_only=True
)

#密碼加密保存
def create(self, validated_data):
    user = super(UserRegSerializer, self).create(validated_data=validated_data)
    user.set_password(validated_data["password"])
    user.save()
    return user

固然，上面的須要重載Create方法而後對密碼加密保存咱們能夠不寫在UserRegSerializer裏面，而是引入另外一種方式，即信號量

二、信號量

（1）users下面建立signals.py

下面代碼簡單的解釋就是監聽User是否接收到以post方法傳遞過來的數據，若是有，判斷是不是新建立用戶，若是是，進行保存

# users/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()


# post_save:接收信號的方式
#sender: 接收信號的model
@receiver(post_save, sender=User)
def create_user(sender, instance=None, created=False, **kwargs):
    # 是否新建，由於update的時候也會進行post_save
    if created:
        password = instance.password
        #instance至關於user
        instance.set_password(password)
        instance.save()

（2）還須要重載配置

users/apps.py

# users/apps.py

from django.apps import AppConfig

class UsersConfig(AppConfig):
    name = 'users'
    verbose_name = "用戶管理"

    def ready(self):
        import users.signals

AppConfig自定義的函數，會在django啓動時被運行

如今添加用戶的時候，密碼就會自動加密存儲了

七、vue和註冊功能聯調

前端頁面註冊後，通常有兩種模式，一種是跳轉到登錄頁面由用戶本身填寫登錄用戶名和密碼，一種是自動幫用戶登陸。下面介紹第二種方法的實現。

首先這裏前端已經寫好了登錄邏輯，不用咱們管，咱們只須要提供一個「token」接口給前端就行，實現自動登陸

生成token的兩個重要步驟，一是payload，二是encode

class UserViewset(CreateModelMixin,viewsets.GenericViewSet):
    '''
    用戶
    '''
    serializer_class = UserRegSerializer
    queryset = User.objects.all()

    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 # 默認的create方法，由於返回的是serializer.data，因此把token放到裏面，再返回
        payload = jwt_payload_handler(user) # 這種生成token的方法是從jwt的源碼裏找到的
        re_dict["token"] = jwt_encode_handler(payload) # 生成token
        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)

    def perform_create(self, serializer): # 重載這個函數，由於源碼裏面是沒有返回的，可是咱們又須要調用。注意這裏的serializer指的就是
        return serializer.save()          # UserRegSerializer裏的model = User對象

後續的登錄成功後的退出，由於token是保存在客戶端的，因此只須要在前端那裏刪除用戶本地的cookie便可。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。