全棧 Django ：快速入門 JWT 認證和 React/Redux (一)

本文介紹了如何快速入門 基於 Django 和 React/Redux 的 SPA （single page web application：單頁面 web 應用） 應用開發。

很難想象一個沒有使用者認證和授權的 Django 應用。因此，我們從一個簡單的應用程式開始，該應用程式可以驗證一個使用者並執行對 API 的授權請求。

此外，你將會學習到如何使用 redux-router，基於 redux-persist 的本地 state 持久化儲存，同時編寫一個簡單的 基於 reactstrap 的 UI 應用 （基於 bootstrap 4 的 React 實現庫）

該教程的第一部分，我們將會建立一個簡單的基於 JWT Token 認證的 Django 後台應用。第二部分 展示了如何構建 React/Redux 前端應用， 第三部分 展示了如何? JWT 重新整理 Token 工作流程。

最後，你將實現一個輕量級，可擴充的基於 Django 的後端和基於 React/Redux 的前端應用系統。在開始教程之前，你必須安裝 Python 3.6 (Ubuntu 環境下確保安裝 python3.6-dev 和 python3.6-venv包)。 什麼是 JWT

JWT 是無狀態授權方法。只能在客戶機上保留伺服器產生的 Token。JWT 本身可以包含額外的載荷。它可以是由伺服器端密鑰簽名的使用者名稱、電子郵件或使用者權限。當您在沒有共用使用者資料庫的情況下將 Django monolith 拆分為不同的伺服器，甚至在其他技術中執行已驗證的後端請求時，這就變得非常方便了。

您可以在 簡單 5 步理解 JWT (JSON Web Tokens) 中閱讀更多關於 JWT 的文章。

JWT 授權端點可以提供兩個 Token 類型——一個短周期訪問 Token 和一個長周期重新整理 Token。可以使用短周期訪問 Token對不同的服務執行 API 呼叫，而使用長周期重新整理 Token 則適合在到期時獲得新的存取權杖。

長周期重新整理 Token 允許使用者在首次驗證身份時只向使用者詢問使用者名稱和密碼，使用者將停留一段時間。

持續重新整理短周期訪問 Token，允許同步 Token 有效載荷(記住使用者名稱或許可權)

有兩種 Token 的另一個原因是阻止使用者接收新存取權杖的能力。 伺服器端

伺服器端項目非常簡單。我們從構建一個 虛擬環境 開始並安裝 Django 依賴包

$ mkdir backend/ && cd backend/

$ python3.6 -m venv env$ source env/bin/activate$ pip install coreapi django djangorestframework \      djangorestframework-simplejwt$ pip freeze > requirements.txt

$ django-admin startproject config .

我們安裝了coreapi 依賴包，可以自動產生 API 模式描述可用的資源、url 是什麼、它們是如何表示的以及它們支援哪些操作。

以及 django-rest-framework-simplejwt 包，它通過重新整理和存取權杖實現 JWT 授權和身分識別驗證。

編輯 config/settings.py 來啟用它

INSTALLED_APPS = [    ...    'rest_framework',]

# Rest Framework

REST_FRAMEWORK = {    'DEFAULT_PERMISSION_CLASSES': (        'rest_framework.permissions.IsAuthenticated',    ),    'DEFAULT_AUTHENTICATION_CLASSES': (        'rest_framework_simplejwt.authentication.JWTAuthentication',        'rest_framework.authentication.SessionAuthentication',    ),}

我們將 rest_framework 添加到 設定的 INSTALLED_APPS 中，預設情況下 使用 IsAuthenticate 保護所有 API 資源, 同時啟動 JWTAuthentication 和 SessionAuthentication。我們將使用標準的 django 會話身分識別驗證來訪問受保護的模式視圖。

編輯 config/urls.py

from django.conf.urls import url, includefrom django.views import genericfrom rest_framework.schemas import get_schema_viewfrom rest_framework_simplejwt.views import (    TokenObtainPairView,    TokenRefreshView,)

urlpatterns = [    url(r'^$', generic.RedirectView.as_view(         url='/api/', permanent=False)),

    url(r'^api/$', get_schema_view()),    url(r'^api/auth/', include(        'rest_framework.urls', namespace='rest_framework')),    url(r'^api/auth/token/obtain/$', TokenObtainPairView.as_view()),    url(r'^api/auth/token/refresh/$', TokenRefreshView.as_view()),]

我們已經啟用了模式視圖、來自 django-rest-framework 的會話身分識別驗證 url，以及用於 JWT 身分識別驗證TokenObtainPoarView 和 TokenRefreshView。

最後一步，讓我們建立一個簡單的 echo API 端點，以測試前端的調用。當我們被授權的時候。對於示範項目，我們可以直接將其添加到 config/urls.py 中。

from rest_framework import views, serializers, statusfrom rest_framework.response import Response

class MessageSerializer(serializers.Serializer):    message = serializers.CharField()

class EchoView(views.APIView):    def post(self, request, *args, **kwargs):        serializer = MessageSerializer(data=request.data)        serializer.is_valid(raise_exception=True)        return Response(            serializer.data, status=status.HTTP_201_CREATED)

urlpatterns = [    ...    url(r'^api/echo/$', EchoView.as_view())]

運行伺服器

$ ./manage.py migrate$ ./manage.py createsuperuser$ ./manage.py runserver

開啟 http://127.0.0.1:8000 登入並查看 我們 API 的自動產生模式。

開啟 http://127.0.0.1:8000/api/auth/token/obtain/ 進入認證，並看到我們有新的訪問和重新整理權杖作為回應

開啟 http://127.0.0.1:8000/api/echo 我們可以檢查 echo 端點

接下來，我們準備構建前端應用，讓我們進入教程的 第二部分