后端
关于签发和核验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之前有两个类需要先熟悉一下:
- localStorage:将变量保存到本地,就算是浏览器关闭了,保存的信息也不会丢失
- 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的过程。