本文介绍了如何快速入门 基于 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 是无状态授权方法。只能在客户机上保留服务器生成的 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, include
from django.views import generic
from rest_framework.schemas import get_schema_view
from 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, status
from 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 端点
接下来,我们准备构建前端应用,让我们进入教程的 第二部分