在登陸組件中找到登陸按鈕，綁定點擊事件
<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',
]
以上就實現了通過用戶名或者手機號的一個多條件登錄。
跳轉到首頁之后，我們需要顯示的不再是登錄注冊按鈕，而是顯示購物車，個人中心等內容，