需求分析
1. 注冊用JWT做狀態保持
1.1 安裝jwt
pip install djangorestframework-jwt
1.2 去settings里面配置jwt配置項
REST_FRAMEWORK = {
'DEFAULT_AUTHENTICATION_CLASSES': (
'rest_framework_jwt.authentication.JSONWebTokenAuthentication',# JWT認證，在前面的認證方案優先
'rest_framework.authentication.SessionAuthentication',
'rest_framework.authentication.BasicAuthentication',
),
}
JWT_AUTH = {
'JWT_EXPIRATION_DELTA': datetime.timedelta(days=1), #JWT_EXPIRATION_DELTA 指明token的有效期
}
1.3 # 在注冊或者登錄之后，響應注冊或者登錄結果之前，生成jwt_token
也就是users/serializers.py里面的create方法中添加
jwt_payload_handler = api_settings.JWT_PAYLOAD_HANDLER
jwt_encode_handler = api_settings.JWT_ENCODE_HANDLER
# 生成載荷：包含了user_id,username,email
payload = jwt_payload_handler(user)
# jwt_token
token = jwt_encode_handler(payload)
# 將token添加到user : python是面向對象的高級動態編程語言
user.token = token
1.4 在前端js/register.js文件中增加保存token
var vm = new Vue({
...
methods: {
...
on_submit: function(){
axios.post(...)
.then(response => {
// 記錄用戶的登錄狀態
sessionStorage.clear();
localStorage.clear();
localStorage.token = response.data.token;
localStorage.username = response.data.username;
localStorage.user_id = response.data.id;
location.href = '/index.html';
})
.catch(...)
}
}
})
登陸
1. 后端實現
在users/urls添加路由
from rest_framework_jwt.views import obtain_jwt_token
urlpatterns = [
url(r'^authorizations/$', obtain_jwt_token),
]
2.在users/utils.py中，創建
def jwt_response_payload_handler(token, user=None, request=None):
"""
自定義jwt認證成功返回數據
"""
return {
'token': token,
'user_id': user.id,
'username': user.username
}
3.修改配置文件
# JWT
JWT_AUTH = {
'JWT_EXPIRATION_DELTA': datetime.timedelta(days=1),
'JWT_RESPONSE_PAYLOAD_HANDLER': 'users.utils.jwt_response_payload_handler',
}
4.在users/utils.py中寫：
def get_user_by_account(account):
"""
根據帳號獲取user對象
:param account: 賬號，可以是用戶名，也可以是手機號
:return: User對象 或者 None
"""
try:
if re.match('^1[3-9]\d{9}$', account):
# 帳號為手機號
user = User.objects.get(mobile=account)
else:
# 帳號為用戶名
user = User.objects.get(username=account)
except User.DoesNotExist:
return None
else:
return user
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):
return user
5. 在配置文件中告知Django使用我們自定義的認證后端
AUTHENTICATION_BACKENDS = [
'users.utils.UsernameMobileAuthBackend',
]
6.修改login.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>登錄</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/host.js"></script>
<script type="text/javascript" src="js/vue-2.5.16.js"></script>
<script type="text/javascript" src="js/axios-0.18.0.min.js"></script>
</head>
<body>
<div class="login_top clearfix">
<a href="index.html" class="login_logo"><img src="images/logo02.png"></a>
</div>
<div class="login_form_bg" id='app'>
<div class="login_form_wrap clearfix">
<div class="login_banner fl"></div>
<div class="slogan fl">商品美 · 種類多 · 歡迎光臨</div>
<div class="login_form fr">
<div class="login_title clearfix">
<a href="javascript:;" class="cur">賬戶登錄</a>
</div>
<div class="form_con">
<div class="form_input cur">
<form id="login-form" @submit.prevent="on_submit">
<input type="text" v-model="username" @blur="check_username" name="" class="name_input" placeholder="請輸入用戶名或手機號">
<div v-show="error_username" class="user_error" v-cloak>請填寫用戶名或手機號</div>
<input type="password" v-model="password" @blur="check_pwd" name="pwd" class="pass_input" placeholder="請輸入密碼">
<div v-show="error_pwd" class="pwd_error" v-cloak>{{ error_pwd_message }}</div>
<div class="more_input clearfix">
<input type="checkbox" v-model="remember">
<label>記住登錄</label>
<a href="/find_password.html">忘記密碼</a>
</div>
<input type="submit" name="" value="登 錄" class="input_submit">
</form>
</div>
</div>
<div class="third_party">
<a @click="qq_login" class="qq_login">QQ</a>
<a href="#" class="weixin_login">微信</a>
<a href="/register.html" class="register_btn">立即注冊</a>
</div>
</div>
</div>
</div>
<div class="footer no-mp">
<div class="foot_link">
<a href="#">關於我們</a>
<span>|</span>
<a href="#">聯系我們</a>
<span>|</span>
<a href="#">招聘人才</a>
<span>|</span>
<a href="#">友情鏈接</a>
</div>
<p>CopyRight © 2016 北京xx商業股份有限公司 All Rights Reserved</p>
<p>電話：010-****888 京ICP備*******8號</p>
</div>
<script type="text/javascript" src="js/login.js"></script>
</body>
</html>
7.修改login.js
var vm = new Vue({
el: '#app',
data: {
host: host,
error_username: false,
error_pwd: false,
error_pwd_message: '請填寫密碼',
username: '',
password: '',
remember: false
},
methods: {
// 獲取url路徑參數
get_query_string: function(name){
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return decodeURI(r[2]);
}
return null;
},
// 檢查數據
check_username: function(){
if (!this.username) {
this.error_username = true;
} else {
this.error_username = false;
}
},
check_pwd: function(){
if (!this.password) {
this.error_pwd_message = '請填寫密碼';
this.error_pwd = true;
} else {
this.error_pwd = false;
}
},
// 表單提交
on_submit: function(){
this.check_username();
this.check_pwd();
if (this.error_username == false && this.error_pwd == false) {
axios.post(this.host+'/authorizations/', {
username: this.username,
password: this.password
}, {
responseType: 'json',
withCredentials: true
})
.then(response => {
// 使用瀏覽器本地存儲保存token
if (this.remember) {
// 記住登錄
sessionStorage.clear();
localStorage.token = response.data.token;
localStorage.user_id = response.data.user_id;
localStorage.username = response.data.username;
} else {
// 未記住登錄
localStorage.clear();
sessionStorage.token = response.data.token;
sessionStorage.user_id = response.data.user_id;
sessionStorage.username = response.data.username;
}
// 跳轉頁面
var return_url = this.get_query_string('next');
if (!return_url) {
return_url = '/index.html';
}
location.href = return_url;
})
.catch(error => {
if (error.response.status == 400) {
this.error_pwd_message = '用戶名或密碼錯誤';
} else {
this.error_pwd_message = '服務器錯誤';
}
this.error_pwd = true;
})
}
},
// qq登錄
qq_login: function(){
}
}
});
django項目中賬號注冊登陸使用JWT的記錄
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。