jwt认证
json web token
形式:一长串字符串,只不过字符串有特殊的规则
第一部分
{"alg":"HS256","typ":"JWT"}
# eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
第二部分
{
"id":"410000200002020212",
"username":"zhangsan",
"age":"18",
"balance":"0",
}
# 编码之后 = ewogICAgImlkIjoiNDEwMDAwMjAwMDAyMDIwMjEyIiwKICAgICJ1c2VybmFtZSI6InpoYW5nc2FuIiwKICAgICJhZ2UiOiIxOCIsCiAgICAiYmFsYW5jZSI6IjAiLAp9
第三部分
# 把前两部分进行整体的签名
# 1. 把第一部分和第二部分编码之后的字符串用 "."拼接,生成一个新的字符串
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.ewogICAgImlkIjoiNDEwMDAwMjAwMDAyMDIwMjEyIiwKICAgICJ1c2VybmFtZSI6InpoYW5nc2FuIiwKICAgICJhZ2UiOiIxOCIsCiAgICAiYmFsYW5jZSI6IjAiLAp9
# 2. 把新生成的字符串,通过HS256这种加密方式进行加密,加密的时候,需要提供一个加密密钥
加密(新字符串+加密密钥)
# 生成一个签名内容
# MDkzZDQ2M2JjOGVlMTJmNzQxOTNkZGJmZDYxODY3NzVmYWI4ZGY1ZDFmNmVmOWU5MzU2OTUwMDIyN2E0ZGVmZA
最终的JWT
# 第一部分.第二部分.第三部分
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.ewogICAgImlkIjoiNDEwMDAwMjAwMDAyMDIwMjEyIiwKICAgICJ1c2VybmFtZSI6InpoYW5nc2FuIiwKICAgICJhZ2UiOiIxOCIsCiAgICAiYmFsYW5jZSI6IjAiLAp9.MDkzZDQ2M2JjOGVlMTJmNzQxOTNkZGJmZDYxODY3NzVmYWI4ZGY1ZDFmNmVmOWU5MzU2OTUwMDIyN2E0ZGVmZA
后端登录功能实现
在注册功能写好以后
编写登录视图类
其中包含了多登录方式
json web token
from rest_framework.response import Response
from rest_framework.views import APIView
from users.models import User
from django.http import HttpResponse
import re,random
#登录的类试图
class Loginview(APIView):
def post(self,request):
# username=request.data.get('username') #接收前端提交的用户名
account=request.data.get('account') #获取用户前端传过来的登录账号,可以是用户名或手机号
password=request.data.get('password') #接收前端提交的密码
#多登录方式一
# #判断登录账号是用户名还是手机号
# rule=r'^1[3-9][0-9]{9}$'
# if not re.findall(rule,account):
# #说明输入的是用户名
# user_info=User.objects.filter(username=account).first()
# else:
# user_info=User.objects.filter(mobile=account).first()
#多登录方式二
from django.db.models import Q
user_info=User.objects.filter(Q(username=account) | Q(mobile=account)).first()
#判断用户是否存在
#获取符合条件的第一条数据,如果没有符合条件的,返回的是None
# user_info=User.objects.filter(username=username).first()
if not user_info: #如果用户不存在
return Response({
'code':400,
'msg':'用户名密码错误1'
})
# 程序走到这里,代表用户存在
#判断密码对不对
if user_info.password!=password: #密码不一致
return Response({
'code': 400,
'msg': '用户名密码错误'
})
# 程序走到这一步,就代表用户存在且密码输入正确
#生成jwt
# pip install pyjwt 安装jwt
import jwt,time #导包
from django.conf import settings
payload={
'user_id':user_info.id, #用户id
'username':user_info.username, #用户名
'exp':int(time.time())+(60*60*24*30) #起始时间,到什么时候超时 时间戳 这里设置有效期一个月
}
# payload 载荷
# key 私钥
# settings.SECRET_KEY django项目随机生成的一个私钥
# algorithm 加密方式
token=jwt.encode(payload,key=settings.SECRET_KEY,algorithm='HS256')
#程序走到这一步,就一定代表用户存在且密码也输入正确、
return Response({
'code':200,
'msg':'登陆成功',
'user':{ #返回用户信息
'name':user_info.username,
'mobile':user_info.mobile
#密码不能往前台传
},
'token':token
})
配置路由
from django.urls import path
from users import views
urlpatterns = [
path('login/',views.Loginview.as_view()),
]
前端实现登录及退出登录
在页面中点击登录
,会触发对应的函数。可以在App组件中找到如下代码
通过分析可知,login方法更改了vuex中的showLogin的值,从而控制登录组件的显示。
- MyLogin.vue组件
- v-model获取用户信息
- 点击登录按钮,触发Login方法
- 在Login方法中,使用axios的post方法提交参数,并接收响应结果
methods: {
// 点击登录触发
Login() {
// 通过element自定义表单校验规则,校验用户输入的用户信息
this.$refs["ruleForm"].validate(valid => {
//如果通过校验开始登录
if (valid) {
// TODO 登录
console.log("开始登录,用户名", this.LoginUser.name, "密码", this.LoginUser.pass)
this.$axios.post('/user/login/',{
'account':this.LoginUser.name,
'password':this.LoginUser.pass
}).then((result) => {
if (result.data.code==200){
// 清空输入框
this.LoginUser.name=""
this.LoginUser.pass=""
// 关闭登录弹窗
this.setShowLogin(false)
// 把返回的用户信息塞入voex里边,用于全局访问
// 用于显示登录成功后 欢迎xxx
this.setUser({
'userName':result.data.user.name
})
// 把数据存到浏览器,即localstorage里面
localStorage.setItem('user',JSON.stringify({
'userName':result.data.user.name
}))
localStorage.setItem('token',result.data.token)
// 返回登陆成功提示
this.notifySucceed(result.data.msg)
}else{
this.notifyError(result.data.msg)
}
}).catch((err) => {
console.log(err)
this.notifyError('页面错误')
});
}
});
},
}
退出登录
找到相对应的vue组件,相对应的功能函数实现
methods: {
// 退出登录
logout() {
// 不显示退出登录框
this.visible = false;
// TODO 退出登录
// // 清空本地存储
localStorage.removeItem('user')
localStorage.removeItem('token')
// 清空本地vuex的数据
this.setUser(false)
},
WEB STORAGE
存数据/改数据
localStorage.setItem(“age”,“29”)
取数据
var age = localStorage.getItem(“age”)
删除数据
localStorage.removeItem(“age”)