JWT
在用戶注冊或登錄后，我們想記錄用戶的登錄狀態，或者為用戶創建身份認證的憑證。
我們不再使用Session認證機制，而使用Json Web Token認證機制。
Json web token (JWT), 是為了在網絡應用環境間傳遞聲明而執行的一種基於JSON的開放標准（(RFC 7519).
該token被設計為緊湊且安全的，特別適用於分布式站點的單點登錄（SSO）場景。
JWT的聲明一般被用來在身份提供者和服務提供者間傳遞被認證的用戶身份信息，以便於從資源服務器獲取資源，
也可以增加一些額外的其它業務邏輯所必須的聲明信息，該token也可直接被用於認證，也可被加密。
pip install djangorestframework-jwt
配置
項目settings中配置
# drf框架的配置信息 REST_FRAMEWORK = { # 異常處理 'EXCEPTION_HANDLER': 'luffy.utils.exceptions.custom_exception_handler', # 用戶登陸認證方式 'DEFAULT_AUTHENTICATION_CLASSES': ( 'rest_framework_jwt.authentication.JSONWebTokenAuthentication', 'rest_framework.authentication.SessionAuthentication', 'rest_framework.authentication.BasicAuthentication', ), }
# jwt載荷中的有效期設置 JWT_AUTH = { 'JWT_EXPIRATION_DELTA': datetime.timedelta(days=1), # 有效期設置 'JWT_RESPONSE_PAYLOAD_HANDLER': 'users.utils.jwt_response_payload_handler', }
-
JWT_EXPIRATION_DELTA 指明token的有效期
from rest_framework_jwt.settings import api_settings jwt_payload_handler = api_settings.JWT_PAYLOAD_HANDLER jwt_encode_handler = api_settings.JWT_ENCODE_HANDLER payload = jwt_payload_handler(user) token = jwt_encode_handler(payload)
在用戶注冊或登錄成功后，在序列化器中返回用戶信息以后同時返回token即可。
默認情況下，djangorestframework-jwt這個模塊已經內置了一個登陸視圖接口給我們了。我們直接使用
當前users的urls.py文件代碼：
from django.urls import path # jwt內部實現的登陸視圖 from rest_framework_jwt.views import obtain_jwt_token urlpatterns=[ path(r"login", obtain_jwt_token ), ]
在總路由文件中，urls.py中注冊子應用路由：
path('users/',include('users.urls')) ,
可以通過postman來完成測試：
輸入賬號和密碼時：
經過上面的測試，登陸視圖已經完成了。
from rest_framework_jwt.views import obtain_jwt_token urlpatterns = [ path(r'login/$', obtain_jwt_token), ]
2.
但是默認的返回值僅有token，我們還需在返回值中增加username和user_id。
通過修改該視圖的返回值可以完成我們的需求。
在users應用中新建一個utils.py 文件，在users/utils.py 中，創建:
def jwt_response_payload_handler(token, user=None, request=None): """ 自定義jwt認證成功返回數據 :token 返回的jwt :user 當前登錄的用戶信息[對象] :request 當前本次客戶端提交過來的數據 """ return { 'token': token, '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', }
測試結果：
前端登錄功能的實現
Login.vue登陸視圖組件，代碼：
<button class="login_btn" @click="loginhander">登錄</button>
<script> export default { name: "Login", data() { return { remmber:false,//是否記住密碼 login_type: 1,//登錄方式，短信登錄還是密碼登錄 username: "",// 登錄賬號 password: "",// 登錄密碼 mobile: "",//手機號碼 sms: "",// 手機短信驗證碼 } }, methods:{ loginheader:function () { //登錄函數 this.$axios.post('http://127.0.0.1:8000/users/login',{ 'username':this.username, 'password':this.password},{responseType:'json'} ).then( response=>{ //請求成功，保存登錄狀態 console.log(response); } ).catch(error=>{}) } }, components: {}, } </script>
點擊登錄按鈕的情況：
當用戶名和密碼正確時，就需要將服務端返回的數據進行保存。
我們可以將JWT保存在cookie中，也可以保存在瀏覽器的本地存儲里，我們保存在瀏覽器本地存儲中
瀏覽器的本地存儲提供了sessionStorage 和 localStorage 兩種：
-
sessionStorage 會話存儲，瀏覽器關閉即失效
-
localStorage 永久存儲，長期有效
使用方法:
sessionStorage.變量名 = 變量值 // 保存數據 sessionStorage.變量名 // 讀取數據 sessionStorage.clear() // 清除所有sessionStorage保存的數據 localStorage.變量名 = 變量值 // 保存數據 localStorage.變量名 // 讀取數據 localStorage.clear() // 清除所有localStorage保存的數據
在端登錄后保存用戶登錄信息和登錄成功后的頁面跳轉：
在Login.vue:
<div class="rember"> <p> <input type="checkbox" class="no" name="a" v-model="remmber" ></input> <span>記住密碼</span> </p> <p>忘記密碼</p> </div>
<script> export default { name: "Login", data() { return { remmber:false,//是否記住密碼 login_type: 1,//登錄方式，短信登錄還是密碼登錄 username: "",// 登錄賬號 password: "",// 登錄密碼 mobile: "",//手機號碼 sms: "",// 手機短信驗證碼 } }, methods:{ loginheader:function () { //登錄函數 this.$axios.post('http://127.0.0.1:8000/users/login',{ 'username':this.username, 'password':this.password},{responseType:'json'} ).then( response=>{ //請求成功，保存登錄狀態 console.log(response); //當要記住密碼時： if (this.remmber){ // 記住密碼時 let data = response.data; localStorage.token=data.token; localStorage.id=data.id; localStorage.username=data.username; }else { //不記住密碼 localStorage.removeItem('token'); let data = response.data; sessionStorage.token=data.token; sessionStorage.id=data.id; sessionStorage.username=data.username; } //登錄成功之后跳轉頁面 this.$router.go(-1);// 跳轉到之前的訪問頁面 // this.$router.push('/home') // 或者跳轉到首頁 } ).catch(error=>{ console.log(error) }) } }, components: {}, } </script>
未登錄時：
登錄成功后：
在header.vue組件中：
<script> export default { name:"Header", props:["current_page"], data(){ return { is_login: false, /* 是否登錄 */ token:localStorage.token || sessionStorage.token, } }, created:function () { //登錄狀態判斷 if(this.token){ //登錄成功 this.is_login=true; }else { this.is_login=false; } }, methods:{ logout(){ localStorage.clear(); sessionStorage.clear(); this.is_login=false; alert("退出登錄成功！") } } } </script>
<template> <div class="header"> <el-container> <el-header height="80px"> <el-row> <el-col class="logo" :span="3"> <router-link to="/"><img src="../../assets/head-logo.svg" alt=""></router-link> </el-col> <el-col :span="16"> <!-- gutter每一列之間的間隔空隙 --> <el-row class="nav" :gutter="20"> <el-col :span="3"><router-link :class="current_page==1?'active':''" to="/courses">免費課</router-link></el-col> <el-col :span="3"><router-link :class="current_page==2?'active':''" to="/courses">輕課</router-link></el-col> <el-col :span="3"><router-link :class="current_page==3?'active':''" to="/courses">學位課</router-link></el-col> <el-col :span="3"><router-link :class="current_page==4?'active':''" to="/courses">題庫</router-link></el-col> <el-col :span="3"><router-link :class="current_page==5?'active':''" to="/courses">教育</router-link></el-col> </el-row> </el-col> <el-col v-if="is_login" class="login-bar" :span="5"> <div class="cart-ico"> <b></b> <img src="../../assets/cart.svg" alt=""> <span>購物車</span> </div> <div class="study">學習中心</div> <div class="member"> <el-dropdown> <span class="el-dropdown-link"> <img src="../../assets/logo@2x.png" alt=""> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>我的賬戶 <i class="el-icon-arrow-right"></i></el-dropdown-item> <el-dropdown-item>我的賬戶 <i class="el-icon-arrow-right"></i></el-dropdown-item> <el-dropdown-item>我的賬戶 <i class="el-icon-arrow-right"></i></el-dropdown-item> <el-dropdown-item><span @click="logout">退出登錄</span> <i class="el-icon-arrow-right"></i></el-dropdown-item> </el-dropdown-menu> </el-dropdown> </div> </el-col> <el-col v-else class="login-bar" :span="5"> <div class="cart-ico"> <img src="../../assets/cart.svg" alt=""> <span>購物車</span> </div> <span class="header-login"><router-link to="/login">登錄</router-link></span> | <span class="header-register">注冊</span> </el-col> </el-row> </el-header> </el-container> </div> </template> <script> export default { name:"Header", props:["current_page"], data(){ return { is_login: false, /* 是否登錄 */ token:localStorage.token || sessionStorage.token, } }, created:function () { //登錄狀態判斷 if(this.token){ //登錄成功 this.is_login=true; }else { this.is_login=false; } }, methods:{ logout(){ localStorage.clear(); sessionStorage.clear(); this.is_login=false; alert("退出登錄成功！") } } } </script> <style scoped> .header{ width: 100%; height: 80px; background: #fff; position: fixed; left: 0; top: 0; margin: 0 auto; z-index: 7; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 0.5px 0.5px 0 #c9c9c9; } .el-container{ width: 1200px; margin: 0 auto; } .el-header{ padding: 0; } .el-row,.el-col{ height: 80px; } .logo{ width: 118px; } .logo,.nav{ line-height: 80px; } .logo img{ vertical-align: middle; /* 設置圖片垂直居中 */ } .nav{ margin-left: 30px!important; margin-right: 0!important; } .nav .el-col .active{ padding-bottom: 16px; padding-left: 5px; padding-right: 5px; border-bottom: 4px solid #ffc210; } .nav,.study{ text-align: center; color: #4a4a4a; } .nav .el-col:hover,.nav .el-col a:hover,.study:hover,.study a:hover{ color: #000000; } .login-bar{ display: flex; align-items: center; } .cart-ico{ width: 88px; height: 28px; margin-right: 20px; background: #f7f7f7; border-radius: 17px; display: flex; align-items: center; justify-content: space-around; cursor: pointer; position: relative; font-size: 14px; } .cart-ico b{ width: 16px; height: 16px; line-height: 17px; font-size: 12px; color: #fff; text-align: center; background: #fa6240; border-radius: 50%; transform: scale(.8); position: absolute; left: 16px; top: -1px; } .cart-ico img{ width: 15px; height: auto; margin-left: 6px; } .cart-ico span{ margin-right: 6px; } .study{ padding-left: 0; font-family: PingFangSC-Regular; letter-spacing: 0; margin-right: 20px; font-size: 15px; cursor: pointer; } .member img{ width: 26px; height: 26px; border-radius: 50%; display: inline-block; cursor: pointer; vertical-align: middle; } .member img:hover{ border: 1px solid rgb(255, 194, 16); } .el-dropdown-menu{ left: 1130px!important; width: 180px; top: 64px!important; } .el-dropdown-menu i{ float:right; line-height: 36px; } .header-login,.header-register{ cursor: pointer; font-size: 15px; color: #4a4a4a; } .header-login:hover,.header-register:hover{ color: #000000; } </style>