在前面咱们已经完成了,前端登陆页面的搭建,以及路由分配,如今咱们做关于登陆认证部分的东西javascript
Django提供了认证系统。认证系统包含:前端
用户vue
权限:二元(是/否)标志指示一个用户是否能够作一个特定的任务。java
组:对多个用户运用标签和权限的一种通用的方式。python
一个可配置的密码哈希系统ios
用户登陆或内容显示的表单和视图git
一个可插拔的后台系统github
Django默认用户的认证机制依赖Session机制,咱们在本项目中将引入JWT认证机制,将用户的登录状态[认证信息]存放在Token字符串中,而后对接Django的认证系统,帮助咱们来实现:算法
用户的数据模型数据库
用户密码的加密与验证
用户的权限系统
Django认证系统中提供了用户模型类User保存用户的数据,默认的User包含如下常见的基本字段:
username
必选。 150个字符之内。 用户名可能包含字母数字,_
,@
,+
.
和-
个字符。在Django更改1.10:max_length
从30个字符增长到150个字符。
email
可选(blank=True
)。 邮箱地址。
password
必选。 密码的哈希及元数据。 (Django 不保存原始密码)。 原始密码能够无限长并且能够包含任意字符。
groups
与Group
之间的多对多关系。
user_permissions
与Permission
之间的多对多关系。
is_staff
布尔值。 指示用户是否能够访问Admin 站点。
is_active
布尔值。 指示用户的帐号是否激活。 咱们建议您将此标志设置为False
而不是删除账户;这样,若是您的应用程序对用户有任何外键,则外键不会中断。它不是用来控制用户是否可以登陆。 在Django更改1.10:在旧版本中,默认is_active为False不能进行登陆。
is_superuser
布尔值。 指定这个用户拥有全部的权限而不须要给他们分配明确的权限。
last_login
用户最后一次登陆的时间。
date_joined
帐户建立的时间。 当帐号建立时,默认设置为当前的date/time。
set_password
(raw_password)
设置用户的密码为给定的原始字符串,并负责密码的。 不会保存User
对象。当None
为raw_password
时,密码将设置为一个不可用的密码。
check_password
(raw_password)
若是给定的raw_password是用户的真实密码,则返回True,能够在校验用户密码时使用。
管理器方法便可以经过User.objects.
进行调用的方法。
create_user
(username, email=None, password=None, **extra_fields)
建立、保存并返回一个User
对象。
create_superuser
(username, email, password, **extra_fields)
与create_user()
相同,可是设置is_staff
和is_superuser
为True
。
Django认证系统中提供的用户模型类及方法很方便,咱们可使用这个模型类,可是字段有些没法知足项目需求,如本项目中须要保存用户的手机号,须要给模型类添加额外的字段。
Django提供了django.contrib.auth.models.AbstractUser
用户抽象模型类容许咱们继承,扩展字段来使用Django认证系统的用户模型类。
咱们能够在apps中建立Django应用users,并在配置文件中注册users应用。
在建立好的应用models.py中定义用户的用户模型类。
class User(AbstractUser): """用户模型类""" mobile = models.CharField(max_length=11, unique=True, verbose_name='手机号') class Meta: db_table = 'ly_users' verbose_name = '用户' verbose_name_plural = verbose_name
咱们自定义的用户模型类还不能直接被Django的认证系统所识别,须要在配置文件中告知Django认证系统使用咱们自定义的模型类。
在settings.py配置文件中进行设置
AUTH_USER_MODEL = 'users.User'
AUTH_USER_MODEL
参数的设置以点.
来分隔,表示应用名.模型类名
。
注意:Django建议咱们对于AUTH_USER_MODEL参数的设置必定要在第一次数据库迁移以前就设置好,不然后续使用可能出现未知错误。
执行数据库迁移
python manage.py makemigrations python manage.py migrate
在用户注册或登陆后,咱们想记录用户的登陆状态,或者为用户建立身份认证的凭证。咱们再也不使用Session认证机制,而使用Json Web Token认证机制。
JWT就一段字符串,由三段信息构成的,将这三段信息文本用.
连接一块儿就构成了Jwt字符串。就像这样:
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ
第一部分咱们称它为头部(header),第二部分咱们称其为载荷(payload, 相似于飞机上承载的物品),第三部分是签证(signature).
jwt的头部承载两部分信息:
声明类型,这里是jwt
声明加密的算法 一般直接使用 HMAC SHA256
完整的头部就像下面这样的JSON:
{ 'typ': 'JWT', 'alg': 'HS256' }
而后将头部进行base64加密(该加密是能够对称解密的),构成了第一部分.
eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9
载荷就是存放有效信息的地方。这个名字像是特指飞机上承载的货品,这些有效信息包含三个部分
标准中注册的声明
公共的声明
私有的声明
标准中注册的声明 (建议但不强制使用) :
iss: jwt签发者
sub: jwt所面向的用户
aud: 接收jwt的一方
exp: jwt的过时时间,这个过时时间必需要大于签发时间
nbf: 定义在什么时间以前,该jwt都是不可用的.
iat: jwt的签发时间
jti: jwt的惟一身份标识,主要用来做为一次性token,从而回避重放攻击。
公共的声明 : 公共的声明能够添加任何的信息,通常添加用户的相关信息或其余业务须要的必要信息.但不建议添加敏感信息,由于该部分在客户端可解密.
私有的声明 : 私有声明是提供者和消费者所共同定义的声明,通常不建议存放敏感信息,由于base64是对称解密的,意味着该部分信息能够归类为明文信息。
定义一个payload:
{ "sub": "1234567890", "name": "John Doe", "admin": true}
而后将其进行base64加密,获得JWT的第二部分。
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9
JWT的第三部分是一个签证信息,这个签证信息由三部分组成:
header (base64后的)
payload (base64后的)
secret
这个部分须要base64加密后的header和base64加密后的payload使用.
链接组成的字符串,而后经过header中声明的加密方式进行加盐secret
组合加密,而后就构成了jwt的第三部分。
// javascript var encodedString = base64UrlEncode(header) + '.' + base64UrlEncode(payload); var signature = HMACSHA256(encodedString, 'secret'); // TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ
关于签发和核验JWT,咱们可使用Django REST framework JWT扩展来完成。
文档网站http://getblimp.github.io/django-rest-framework-jwt/
http://getblimp.github.io/django-rest-framework-jwt/
安装
pip install djangorestframework-jwt
settings.py的配置代码中
REST_FRAMEWORK = { # 用户登录认证方式 'DEFAULT_AUTHENTICATION_CLASSES': ( 'rest_framework_jwt.authentication.JSONWebTokenAuthentication', 'rest_framework.authentication.SessionAuthentication', 'rest_framework.authentication.BasicAuthentication', ), } import datetime JWT_AUTH = { 'JWT_EXPIRATION_DELTA': datetime.timedelta(days=1), }
JWT_EXPIRATION_DELTA 指明token的有效期
Django REST framework JWT 扩展的说明文档中提供了手动签发JWT的方法
from rest_framework_jwt.settings import api_settings jwt_payload_handler = api_settings.JWT_PAYLOAD_HANDLER jwt_encode_handler = api_settings.JWT_ENCODE_HANDLER payload = jwt_payload_handler(user) token = jwt_encode_handler(payload)
在用户注册或登陆成功后,在序列化器中返回用户信息之后同时返回token便可。
默认状况下,djangorestframework-jwt这个模块已经内置了一个登录视图接口给咱们了。咱们直接使用
from django.urls import path # jwt内部实现的登录视图 from rest_framework_jwt.views import obtain_jwt_token urlpatterns=[ path(r"login", obtain_jwt_token ), ]
在总路由文件中,urls.py中注册子应用路由:
path('users/', include("users.urls")),
后端借口基本写完,如今咱们在前端编写代码接收接口数据:
咱们能够将JWT保存在cookie中,也能够保存在浏览器的本地存储里,咱们保存在浏览器本地存储中
浏览器的本地存储提供了sessionStorage 和 localStorage 两种:
sessionStorage 会话存储,浏览器关闭即失效
localStorage 永久存储,长期有效
sessionStorage.变量名 = 变量值 // 保存数据 sessionStorage.变量名 // 读取数据 sessionStorage.clear() // 清除全部sessionStorage保存的数据 localStorage.变量名 = 变量值 // 保存数据 localStorage.变量名 // 读取数据 localStorage.clear() // 清除全部localStorage保存的数据
script发送axios以及回调函数处理的代码:
methods:{ loginhander(){ this.$axios.post("http://127.0.0.1:8000/users/login",{ "username":this.username, "password":this.password },{ responseType:"json" }). then(response=>{ // 请求成功,保存登录状态 if(this.remember){ // 记住密码 sessionStorage.removeItem("token"); let data = response.data; localStorage.token = data.token; }else{ // 不记住密码 localStorage.removeItem("token"); let data = response.data; sessionStorage.token = data.token; } // 登陆成功之后,跳转页面 this.$router.go(-1); // this.$router.push("/home"); }).catch(error=>{ console.log(error); }) } }
<template> <div class="header"> <el-container> <el-header height="80px"> <el-row> <el-col class="logo" :span="3"> <router-link to="/"><img src="../../assets/head-logo.svg" alt=""></router-link> </el-col> <el-col :span="16"> <!-- gutter每一列之间的间隔空隙 --> <el-row class="nav" :gutter="20"> <el-col :span="3"><router-link :class="current_page==1?'active':''" to="/courses">免费课</router-link></el-col> <el-col :span="3"><router-link :class="current_page==2?'active':''" to="/courses">轻课</router-link></el-col> <el-col :span="3"><router-link :class="current_page==3?'active':''" to="/courses">学位课</router-link></el-col> <el-col :span="3"><router-link :class="current_page==4?'active':''" to="/courses">题库</router-link></el-col> <el-col :span="3"><router-link :class="current_page==5?'active':''" to="/courses">教育</router-link></el-col> </el-row> </el-col> <el-col v-if="is_login" class="login-bar" :span="5"> <div class="cart-ico"> <b></b> <img src="../../assets/cart.svg" alt=""> <span>购物车</span> </div> <div class="study">学习中心</div> <div class="member"> <el-dropdown> <span class="el-dropdown-link"> <img src="../../assets/logo@2x.png" alt=""> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>个人帐户 <i class="el-icon-arrow-right"></i></el-dropdown-item> <el-dropdown-item>个人帐户 <i class="el-icon-arrow-right"></i></el-dropdown-item> <el-dropdown-item>个人帐户 <i class="el-icon-arrow-right"></i></el-dropdown-item> <el-dropdown-item><span @click="logout">退出登陆</span> <i class="el-icon-arrow-right"></i></el-dropdown-item> </el-dropdown-menu> </el-dropdown> </div> </el-col> <el-col v-else class="login-bar" :span="5"> <div class="cart-ico"> <img src="../../assets/cart.svg" alt=""> <span>购物车</span> </div> <span class="header-login"><router-link to="/login">登陆</router-link></span> | <span class="header-register">注册</span> </el-col> </el-row> </el-header> </el-container> </div> </template> <script> export default { name:"Header", props:["current_page"], data(){ return { token: localStorage.token || sessionStorage.token, is_login: false, /* 是否登陆 */ } }, created(){ // 登陆状态判断 if(this.token){ this.is_login=true; }else{ this.is_login=false; } }, methods:{ logout(){ localStorage.clear(); sessionStorage.clear(); this.is_login=false; alert("退出登陆成功"); } } } </script>
from rest_framework_jwt.views import obtain_jwt_token urlpatterns = [ path(r'login/$', obtain_jwt_token), ]
可是默认的返回值仅有token,咱们还需在返回值中增长username和user_id。
经过修改该视图的返回值能够完成咱们的需求。
在users/utils.py 中,建立
def jwt_response_payload_handler(token, user=None, request=None): """ 自定义jwt认证成功返回数据 :token 返回的jwt :user 当前登陆的用户信息[对象] :request 当前本次客户端提交过来的数据 """ return { 'token': token, 'id': user.id, 'username': user.username, }
修改settings.py配置文件
# JWT JWT_AUTH = { 'JWT_EXPIRATION_DELTA': datetime.timedelta(days=1), 'JWT_RESPONSE_PAYLOAD_HANDLER': 'users.utils.jwt_response_payload_handler', }