jwt登录

后端

关于签发和核验JWT，我们可以使用Django REST framework JWT扩展来完成。使用下面的命令进行安装：

pip install djangorestframework-jwt

下面这些在官方文档上都是有的，在settngs.dev.py中写入

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework_jwt.authentication.JSONWebTokenAuthentication',
        'rest_framework.authentication.SessionAuthentication',
        'rest_framework.authentication.BasicAuthentication',
    ),
}
import datetime
JWT_AUTH = {
	#指明token的有效期
    'JWT_EXPIRATION_DELTA': datetime.timedelta(days=10),
}

使用jwt真的很简单，只需要在子应用中设置路由，访问obtain_jwt_token，就能够得到一个jwt。这个obtain_jwt_token在源码中就是一个view，已经实现了queryset和序列化器，所以当使用post请求url的时候可以得到一个序列化的jwt。

from django.urls import path
from rest_framework_jwt.views import obtain_jwt_token
urlpatterns = [
    path(r'login/', obtain_jwt_token),
]

前端

在Login.vue中设置登录方法，其中使用ajax的post请求，代码如下：

loginHandler(){
  this.$axios.post(`${this.$settings.HOST}/user/login/`, {
    username: this.username,
    password: this.password
  }).then(response=>{
    console.log(response.data)
  }).catch(error=>{
    console.log(error.response)
  })
}

当用户点击登录按钮的时候，就会触发上面这个事件，将v-model监视的变量this.username，this.password通过post请求传到我们后端url上去，前面已经设置好了，返回token值。我们需要把这个token保存下来。怎么保存呢？
保存token之前有两个类需要先熟悉一下：

1. localStorage：将变量保存到本地，就算是浏览器关闭了，保存的信息也不会丢失
2. sessionStorage：只在会话没有被关闭，或者说是浏览器没有关闭之前保存信息，一旦关闭浏览器保存的信息就无了

因此，我们在上面的代码then中加入存储信息的代码，为了让界面更加友好在catch中加入element-ui的错误提醒消息，对于是否使用记住密码，采取不同的策略，最后的代码如下：

loginHandler(){
	this.$axios.post(`${this.$settings.HOST}/user/login/`, {
	  username: this.username,
	  password: this.password
	}).then(response=>{
	  if(this.remember){
	    //记住登录状态
	    sessionStorage.removeItem("user_token")
	    localStorage.user_token = response.token
	  }else{
	    //不记住登录状态
	    localStorage.removeItem("user_token")
	    sessionStorage.user_token = response.token
	  }
	}).catch(error=>{
	  this.$message.error("登录失败")
	  console.log(error.response)
	})
}

登录的逻辑可以注意一下：在Login.vue中实现了登录逻辑之后成功登录，需要跳转到首页去。那么在首页中我们就要判断用户是否登录了，这还是使用localStorage和sessionStorage来进行判断，如果能从里面取到值，说明用户是登录了的，如果取不到值，就没有登录。登录和没登录，通过v-if来条件渲染。

vue数据双向绑定：template通过v-model监视一个数据，当监视的数据发生改变的时候，将改变的值赋给监视的变量，这个变量改变，在script中也能看见他的改变，也就是可以使用，这是template->script的过程。在script中也可以给变量赋值，通过return把数据返回给template，template可以将获得的数据进行渲染展示这是script->template的过程。通常用在一些input表单上面，例如登录的时候使用v-model来监视用户名和密码，改变，在script中就能获得值，通过ajax的post方法将值传给后端，这是template->script的过程；上面描述的判断用户有没有登录的过程就是script->template的过程。