jwt认证
json web token
形式：一长串字符串，只不过字符串有特殊的规则
{"alg":"HS256","typ":"JWT"}
{
"id":"410000200002020212",
"username":"zhangsan",
"age":"18",
"balance":"0",
}
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.ewogICAgImlkIjoiNDEwMDAwMjAwMDAyMDIwMjEyIiwKICAgICJ1c2VybmFtZSI6InpoYW5nc2FuIiwKICAgICJhZ2UiOiIxOCIsCiAgICAiYmFsYW5jZSI6IjAiLAp9
加密（新字符串+加密密钥）
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):
account=request.data.get('account')
password=request.data.get('password')
from django.db.models import Q
user_info=User.objects.filter(Q(username=account) | Q(mobile=account)).first()
if not user_info:
return Response({
'code':400,
'msg':'用户名密码错误1'
})
if user_info.password!=password:
return Response({
'code': 400,
'msg': '用户名密码错误'
})
import jwt,time
from django.conf import settings
payload={
'user_id':user_info.id,
'username':user_info.username,
'exp':int(time.time())+(60*60*24*30)
}
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()),
]
前端实现登录及退出登录
- v-model获取用户信息
- 点击登录按钮，触发Login方法
- 在Login方法中，使用axios的post方法提交参数，并接收响应结果
methods: {
Login() {
this.$refs["ruleForm"].validate(valid => {
if (valid) {
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)
this.setUser({
'userName':result.data.user.name
})
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;
localStorage.removeItem('user')
localStorage.removeItem('token')
this.setUser(false)
},
存数据/改数据
localStorage.setItem(“age”,”29″)
取数据
var age = localStorage.getItem(“age”)
删除数据
localStorage.removeItem(“age”)
Original: https://blog.csdn.net/qishaoawei/article/details/124970169
Author: qishaoawei
Title: JWT认证及登录功能实现，退出登录
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/733034/
转载文章受原作者版权保护。转载请注明原作者出处！