Vue前端实现登陆功能
在登陆组件中找到登陆按钮，绑定点击事件
<button class="login_btn" @click="loginhander">登录</button>
在methods中请求后端
export default {
name: 'Login',
data(){
return {
login_type: 0,
remember:false, // 记住密码
username:"",
password:"",
}
},
methods:{
// 登录
loginhander(){
this.$axios.post("http://127.0.0.1:8000/users/authorizations/",{"username":this.username,"password":this.password}).then(response=>{
console.log(response.data)
}).catch(error=>{
console.log(error)
})
}
},
};
前端保存jwt
可以将JWT保存在cookie中，也可以保存在浏览器的本地存储里，我们保存在浏览器本地存储中
浏览器的本地存储提供了sessionStorage 和 localStorage 两种，从属于window对象：
- sessionStorage 浏览器关闭即失效
- localStorage 长期有效
使用方法
sessionStorage.变量名 = 变量值 // 保存数据
sessionStorage.setItem("变量名","变量值") // 保存数据
sessionStorage.变量名 // 读取数据
sessionStorage.getItem("变量名") // 读取数据
sessionStorage.removeItem("变量名") // 清除单个数据
sessionStorage.clear() // 清除所有sessionStorage保存的数据
localStorage.变量名 = 变量值 // 保存数据
localStorage.setItem("变量名","变量值") // 保存数据
localStorage.变量名 // 读取数据
localStorage.getItem("变量名") // 读取数据
localStorage.removeItem("变量名") // 清除单个数据
localStorage.clear() // 清除所有sessionStorage保存的数据
登陆组件代码Login.vue
// 使用浏览器本地存储保存token
if (this.remember) {
// 记住登录
sessionStorage.clear();
localStorage.token = response.data.token;
} else {
// 未记住登录
localStorage.clear();
sessionStorage.token = response.data.token;
}
// 页面跳转回到上一个页面 也可以使用 this.$router.push("/") 回到首页
this.$router.go(-1)
默认的返回值仅有token，我们还需在返回值中增加username和id，方便在客户端页面中显示当前登陆用户
通过修改该视图的返回值可以完成我们的需求。
在user/utils.py 中，创建
def jwt_response_payload_handler(token, user=None, request=None):
"""
自定义jwt认证成功返回数据
"""
return {
'token': token,
'id': user.id,
'username': user.username
}
修改settings/dev.py配置文件
# JWT
JWT_AUTH = {
'JWT_EXPIRATION_DELTA': datetime.timedelta(days=1),
'JWT_RESPONSE_PAYLOAD_HANDLER': 'users.utils.jwt_response_payload_handler',
}
登陆组件代码Login.vue
// 使用浏览器本地存储保存token
if (this.remember) {
// 记住登录
sessionStorage.clear();
localStorage.token = response.data.token;
localStorage.id = response.data.id;
localStorage.username = response.data.username;
} else {
// 未记住登录
localStorage.clear();
sessionStorage.token = response.data.token;
sessionStorage.id = response.data.id;
sessionStorage.username = response.data.username;
}
//登录成功之后，提示用户，然后用户点击确定，就跳转到首页
let ths = this;
this.$alert('登录成功！','路飞学城',{ #element-ui的alert需要三个参数，提示信息，标题，{callback回调函数}
callback(){
ths.$router.push('/');
}
})
多条件登录
JWT扩展的登录视图，在收到用户名与密码时，也是调用Django的认证系统中提供的authenticate()来检查用户名与密码是否正确。
可以通过修改Django认证系统的认证后端（主要是authenticate方法）来支持登录账号既可以是用户名也可以是手机号。
官方说：修改Django认证系统的认证后端需要继承django.contrib.auth.backends.ModelBackend，并重写authenticate方法。
authenticate(self, request, username=None, password=None, **kwargs)方法的参数说明：
- request 本次认证的请求对象
- username 本次认证提供的用户账号
- password 本次认证提供的密码
我们想要让用户既可以以用户名登录，也可以以手机号登录，那么对于authenticate方法而言，username参数即表示用户名或者手机号。
重写authenticate方法的思路：
- 根据username参数查找用户User对象，username参数可能是用户名，也可能是手机号
- 若查找到User对象，调用User对象的check_password方法检查密码是否正确
在users应用下创建一个utils.py中编写：
def get_user_by_account(account):
"""
根据帐号获取user对象
:param account: 账号，可以是用户名，也可以是手机号
:return: User对象 或者 None
"""
try:
user = models.User.objects.filter(Q(username=account)|Q(mobile=account)).first()
except models.User.DoesNotExist:
return None
else:
return user
from . import models
from django.db.models import Q
from django.contrib.auth.backends import ModelBackend
class UsernameMobileAuthBackend(ModelBackend):
"""
自定义用户名或手机号认证
"""
def authenticate(self, request, username=None, password=None, **kwargs):
user = get_user_by_account(username)
#if user is not None and user.check_password(password) :
if user is not None and user.check_password(password) and user.is_authenticated:
#user.is_authenticated是看他有没有权限的，这里可以不加上它
return user
在配置文件settings/dev.py中告知Django使用自定义的认证后端
AUTHENTICATION_BACKENDS = [
'users.utils.UsernameMobileAuthBackend',
]
以上就实现了通过用户名或者手机号的一个多条件登录。
跳转到首页之后，我们需要显示的不再是登录注册按钮，而是显示购物车，个人中心等内容，
