Vue结合Django-Rest-Frameword实现登录认证(一)

·  阅读 2775
Vue结合Django-Rest-Frameword实现登录认证(一)

作者:小土豆

博客园:www.cnblogs.com/HouJiao/

掘金:juejin.cn/user/243617…

前言

最近需要做一个登录认证的功能,所以想将整个的过程做一个记录,方便以后回头查看,同时希望给和我遇到同样问题的同学一些参考。

因为认证是后端的功能,所以我这个不专业的前端在实现这个功能的时候不会深究太多。所以在记录的过程中没有过多的原理,着重记录实现过程和这个过程中遇到的问题以及解决方案。

如果对登录这块前后端流程原理不太懂的,可以先做一点功课,或者直接看我的整个操作和结果,看完之后会从结果和现象出发,在去理解学习登录认证原理就会更容易。

初始的环境介绍

前端框架

框架:Vue
HTTP库:axios

后端项目

后端框架:基于pythondjango框架
WEB API:rest-framework
服务器: centos
数据库:PostgreSQL
python版本:2.7.5
django版本:1.10.1

关于后端数据库的一些说明

数据库使用的是PostgreSQL,并且已经对数据库表进行了同步,命令为:python manage.py migrate

数据库进行同步以后,会生成10相关的数据表。

需要关注的就是auth_user表这个表,它是django框架生成的用户表,后面就使用这个表保存用户的信息。

我们查看一下这个表结构。

表里面暂时没有什么数据。

接着我们来创建一个用户,用于后期的登录测试:python manage.py createsuperuser

用户创建成功,此时在去查询数据表,就有一条用户信息了。

接下来就是登录验证的实现了。

后端Django项目配置

Django登录认证配置

首先我们需要在setting.py文件的INSTALLED_APPS配置登录认证的APP

INSTALLED_APPS = [
    ...
    'rest_framework.authtoken'
]
复制代码

设置全局的认证方案

接着在setting.py中配置全局身份认证方案。

# 设置全局身份认证方案
REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework.authentication.TokenAuthentication',  # token认证
    )
}
复制代码

数据库同步

上面的配置完成需要进行数据库同步:python manage.py migrate

在此查看数据库:

发现会多出来一个名为authtoken_token的数据表,这个表就是和用户认证相关的数据表。

简单测试

我们已经配置好了全局的认证方式,那按道理来说,现在任意访问后端的某个API就会出现为HTTP 401未经授权这样的错误,那我们来试一试。

那结果发现请求还是可以正常发出。 这块在网上搜索了很久,看到有网友说关于setting设置的全局身份认证方案配置有问题,正确的配置是

# 设置全局身份认证方案
REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': (
        'rest_framework.permissions.IsAuthenticated',
    ),
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework.authentication.TokenAuthentication',  # token认证
    )
}
复制代码

DEFAULT_PERMISSION_CLASSES是关于用户的权限配置,如果没有配置该项的话就是允许用户无限制访问,不管我们的请求是被认证或未认证的。

这块可以看 👉官方文档 的说明

那加上这个认证以后呢,在去请求前面的API

发现这次终于有反应了,服务器端返回了401,就是用户认证失败。

经过一阵思考后的再次测试

那接着我想起前面新增的IsAuthenticated授权配置,所以将setting进行了修改。

# 设置全局身份认证方案
REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': (
        'rest_framework.permissions.IsAuthenticated',
    ),
    # 'DEFAULT_AUTHENTICATION_CLASSES': (
    #     'rest_framework.authentication.TokenAuthentication',  # token认证
    # )
}
复制代码

即注释了全局的用户认证,保留了权限认证,测试一下这个全局的授权配置会对请求产生什么影响。

我们发现这条API返回了403,也就是访问的权限出现了问题。

那不管怎么样,在单独配置TokenAuthentication的情况下确实无法生效,而且官方文档也明确说明:如果没有配置DEFAULT_PERMISSION_CLASSES就是允许用户无限制访问,不管我们的请求是被认证或未认证的。

所以如果需要进行用户认证,那必须的也配上权限验证,用户认证才会生效。

这个仅仅是自己的一个尝试

后端Django项目实现登录API

接着我们来实现后端的登录接口

创建一个新的app

django-admin startapp userAuth

在views.py中编写登录逻辑

# -*- coding: utf-8 -*-
# Create your views here.

from django.contrib import auth

from rest_framework.permissions import AllowAny
from rest_framework.authtoken.models import Token
from rest_framework.response import Response
from rest_framework.decorators import api_view, authentication_classes, permission_classes

@api_view(['POST'])
@permission_classes((AllowAny,))
@authentication_classes(())
def login(request):
    """登录"""
    result = True
    errorInfo = u''
    detail = {}
    data = request.data
    username = data.get('username')
    password = data.get('password')
    
    # 调用django进行用户认证 
    # 验证成功 user返回<class 'django.contrib.auth.models.User'>
    # 验证失败 user返回None
    user = auth.authenticate(username=username, password=password)
    print "user",user
    if user == None:
        result = False
        errorInfo = u'用户名或密码错误'
        return Response({"result": result, "detail": detail, "errorInfo": errorInfo})
    
    # 用户名和密码验证成功
    # 获取用户的token 如果没有token ,表示时用户首次登录,则进行创建,并且返回token
    try:
        tokenObj = Token.objects.get(user_id=user.id)
    except Exception as e:
        # token 不存在 说明是首次登录
        tokenObj = Token.objects.create(user=user, token=token)
    # 获取token字符串
    token = tokenObj.key
    return Response({"result": result, "detail": {'token': token}, "errorInfo": errorInfo})

复制代码

那登录的简单代码逻辑就写好了。

在这之前呢,我们先看下前面生成的关于用户认证的数据表authtoken_token

暂时是没有任何记录,然后在产品的登录界面输入用户名和密码。

这里的用户名和密码就是前面使用python manage.py createsuperuser命令创建的admin账户

因为是首次登录,因此为该用户创建token,即authtoken_token会产生一条记录。

这里给大家看一看我登录成功以后的authtoken_token数据表。

前端关于登录的逻辑处理

最后就是关于前端vue处的逻辑,我们先看一下登录页面的methods逻辑。

login: function(){
      axios.post(url, this.loginForm).then(response =>{
          const {result, detail, errorInfo}  = response.data;
          if(result == true){
              // 登录成功
              // 设置token
              localStorage.setItem('token', detail.token);
              // 跳转页面
              this.$router.push('/certMake');
          }else{
              this.$message({
                  showClose: true,
                  message: errorInfo,
                  type: 'error'
              });
          }
      });
  }
复制代码

可以看到登录成功以后我使用localStoragetoken进行本地存储。

接着我们需要在访问其他API时将这个token设置到请求头部。

在这之前呢,我们先看一下API没有添加token时的结果。

然后将token的信息添加到请求头。

// 别的模块的请求
getCertList: function(){
      const url = '/api/cert/certManage/certList';
      // 从localStorage获取到登录时保持的token
      const auth = 'Token ' + localStorage.getItem('token');
      const header = {'Authorization':auth}
      axios.get(url, {'headers': header}).then(response =>{
          console.log(response.data);
          const {result, detail, errorInfo}  = response.data;
          if(result == true){
             this.certList = detail.certList;
          }else{
              this.$message({
                  showClose: true,
                  message: errorInfo,
                  type: 'error'
              });
          }
      });
}
复制代码

然后在重新请求上面的API。

可以看到请求头部已经添加上了token,而且响应的状态码也是200

那说明我们的登录页面已经成功啦。

结语

那本篇文章是不是非常简单呢(实际的我在尝试的过程中差点头秃🔥),但是还是有些功能是需要优化改进的。

那下一篇文章的内容会梳理以下几点:

1. 优化axios:请求封装、认证信息设置的封装 
2. 注销  
3. 设置token过期时间  
复制代码

参考文章

👉 django-rest-framework官方文档#权限篇
👉 django-rest-framework官方文档#授权认证篇

写在最后

如果这篇文章有帮助到你,❤️关注+点赞+收藏+评论+转发❤️鼓励一下作者

文章公众号首发,关注 不知名宝藏程序媛 第一时间获取最新的文章

笔芯❤️~

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改