回顾

在上篇文章《手把手教你做测开：开发Web平台之环境准备》中，我们做了以下几件事情：

1. 搭建了前后端项目工程

2. 安装了前后端的依赖

3. 配置并启动了前后端服务

4. 创建了后端子应用

5. 将Rest Framework和数据库连接信息配置进后端的配置文件中

也许你已经蠢蠢欲动准备写代码了，看到这里恭喜你，我们马上进入代码环节。在这篇文章中，我们将完成以下功能的实战：

1. 后端登录认证的实现

2. 前后端服务关联配置

3. 前端登录逻辑的梳理

4. 前端登录逻辑的修改

5. 跨域问题的解决

后端登录认证的实现

说到Web端的认证机制，作为测试人员，我们能想到的是cookie、session、token。那么Django中也为我们提供了一些jwt(Json Web Token)认证的方式。

有djangorestframework-jwt、djangorestframework-simplejwt等依赖库，由于前者已经不维护了，我们本次使用后者(官方文档：https://django-rest-framework-simplejwt.readthedocs.io/en/latest/)。

jwt安装与配置

可以使用pip install djangorestframework-simplejwt来安装，但我们之前已经安装过了。

在后端配置文件settings.py中配置。这里需要注意，simplejwt为我们提供了两个token，一个是access token，一个是refresh token。

ACCESSTOKENLIFETIME是access token的过期时间，配置为5分钟，REFRESHTOKENLIFETIME是refresh token的过期时间，默认为1天。

当access token失效时，refresh token会自动获取一个新的access token，使得用户保持在登录态，直到refresh toke过期，用户再做重新登录。否则access token一旦失效，用户就要重新登录体验会比较差。

from datetime import timedelta

REST_FRAMEWORK = {

'DEFAULT_AUTHENTICATION_CLASSES': (

'rest_framework_simplejwt.authentication.JWTAuthentication',

)

}

SIMPLE_JWT = {

'ACCESS_TOKEN_LIFETIME': timedelta(minutes=5),

'REFRESH_TOKEN_LIFETIME': timedelta(days=1),

'ROTATE_REFRESH_TOKENS': False,

'BLACKLIST_AFTER_ROTATION': False,

'UPDATE_LAST_LOGIN': False,

'ALGORITHM': 'HS256',

'SIGNING_KEY': SECRET_KEY,

'VERIFYING_KEY': None,

'AUDIENCE': None,

'ISSUER': None,

'JWK_URL': None,

'LEEWAY': 0,

'AUTH_HEADER_TYPES': ('Bearer',),

'AUTH_HEADER_NAME': 'HTTP_AUTHORIZATION',

'USER_ID_FIELD': 'id',

'USER_ID_CLAIM': 'user_id'

}

(二). user_auth序列化器

1.我们从simplejwt的官网可以看到，它为我们提供了一些自定义token的方法。

2.为什么我们要自定义返回token？因为如果直接使用，我们可能得到的登录返回结果是类似这样的：

data: {

'access': 'xxxxxxxx',

'refresh': 'xxxxxxx' }

3.一个登录请求的响应结果，我们肯定希望有code、message，包括user_id，因此我们需要在userauth子应用下创建一个序列化器文件serializer.py。

4.在这个文件中，我们创建了一个MyTokenObtainPairSerializer类，这个类继承了TokenObtainPairSerializer类，然后重写了父类的gettoken和validate方法。我们给校验后的返回数据加上了code、message、user_id等字段。

from rest_framework_simplejwt.serializers import TokenObtainPairSerializer

class MyTokenObtainPairSerializer(TokenObtainPairSerializer):

@classmethod

def get_token(cls, user):

token = super().get_token(user)

return token

def validate(self, attrs):

data = super().validate(attrs)

re_data = {'data': data, 'code': 200, 'message': 'success', 'user_id': self.user.id}

return re_data

(三). user视图

1.在user_auth子应用下的views.py中定义一个MyTokenObtainPairView的视图类，它继承了TokenObtainPairView，指定它的序列化器为我们自定义的序列化器MyTokenObtainPairSerializer。

from rest_framework_simplejwt.views import TokenObtainPairView

from .serializer import MyTokenObtainPairSerializer

class MyTokenObtainPairView(TokenObtainPairView):

serializer_class = MyTokenObtainPairSerializer

2.请求方法不需要自己定义，MyTokenObtainPairView的父类的父类 TokenViewBase中定义了一个post方法，这个是最终返回给我们登录后的token及其他信息的接口。

(四). user路由

1.序列化器、视图类都定义完成后，下一步需要看看路由，记得在上篇文章中，我们在user_auth子应用下新建了一个urls.py文件，这个文件里就用来存放子应用的路由信息。

将子路由的访问路径设置为 user/login。

from django.urls import path, include

from rest_framework.routers import DefaultRouter

from .views import MyTokenObtainPairView

router = DefaultRouter()

urlpatterns = [

path('', include(router.urls)), path('user/login', MyTokenObtainPairView.as_view(), name='token_obtain_pair'), ]

2.子应用的路由设置好后，需要去父路由backend/urls.py中设置子路由的信息。这样最终的一个访问路径将是：http://localhost:8000/user/login。

from django.contrib import admin

from django.urls import path, include

urlpatterns = [

path('admin/', admin.site.urls), path('', include('user_auth.urls'))

]

(五). user数据表迁移

1.很多人看到这里不禁要问，User模型类是不是还没定义。事实上，django为我们自带了User模型类，它的路径是django.contrib.auth.models.User，因此需要对自带的User模型类做数据迁移。

……

由于作者版权要求，仅展示文章的一部分，如需阅读完整版文章，可以私信回复”文章“即可免费获取。

最后：

1）关注+私信回复：“测试”，可以免费领取一份10G软件测试工程师面试宝典文档资料。

2）关注+私信回复："入群" 就可以邀请你进入软件测试群学习交流~~