傳統Flask通過Flask-Login的login_user()解決登錄問題，通過session進行處理，不適合前后端分離系統，所以使用JWT進行用戶認證
Session-cookie:
Session是對于服務端來說的，客戶端是沒有Session一說的，Session是服務器在和客戶端建立連接時添加客戶端連接標志，最侄訓在服務器軟體(Apache、Tomcat、JBoss)轉化為一個臨時Cookie(SessionId)發送給給客戶端，當客戶端請求時服務器會檢查是否攜帶了這個SessionId(臨時Cookie)，如果沒有則會要求重新登錄，
問題：
如果我們的頁面出現了 XSS 漏洞，由于 cookie 可以被 JavaScript 讀取，XSS 漏洞會導致用戶SessionId泄露，而作為后端識別用戶的標識，cookie 的泄露意味著用戶資訊不再安全，在設定 cookie 的時候，其實你還可以設定 httpOnly 以及 secure 項，設定 httpOnly 后 cookie 將不能被 JS 讀取，瀏覽器會自動的把它加在請求的 header 當中，設定 secure 的話，cookie 就只允許通過 HTTPS 傳輸，
httpOnly 選項使得 JS 不能讀取到 cookie，那么 XSS 注入的問題也基本不用擔心了，但設定 httpOnly 就帶來了另一個問題，就是很容易的被 XSRF或CSRF(跨站請求偽造)，當你瀏覽器開著這個頁面的時候，另一個頁面可以很容易的跨站請求這個頁面的內容，因為 cookie 默認被發了出去，
由于后端保存了所有用戶的Session，后端每次都需要根據SessionId查出用戶Session進行匹配，加大了服務器端的壓力，
JWT:
JWT 是一個開放標準(RFC 7519)，它定義了一種用于簡潔，自包含的用于通信雙方之間以 JSON 物件的形式安全傳遞資訊的方法，JWT 可以使用 HMAC 演算法或者是 RSA 的公鑰密鑰對進行簽名，它具備兩個特點：
簡潔(Compact)
可以通過URL, 引數或者在 HTTP header 發送，因為資料量小，傳輸速度快
自包含(Self-contained)
負載中包含了所有用戶所需要的資訊，避免了多次查詢資料庫
JWT一共由三部分組成，header（頭部）、payload（負載）、signature（簽名）通過‘.’進行拼接
header(頭部) 轉Base64
alg加密演算法typ型別payload(負載) 自定義資訊內容, 不建議存盤敏感資訊(如密碼) 轉Base64
iss簽發者sub面向的用戶aud接收jwt的一方exp過期時間(必須大于簽發時間jat)nbf定義在什么時間之前，該jwt都是不可用的jat簽發時間jti唯一身份標識，主要用來作為一次性token,從而回避重放攻擊signature(簽名) 一共三部分，轉base64的header和轉base64的payload拼接之后，然后使用header中宣告的加密方式和secret加鹽的方式加密字串
轉Base64的header
轉Base64的payload
secret(私鑰)最后一步簽名的程序，實際上是對頭部以及負載內容進行簽名，防止內容被竄改，如果有人對頭部以及負載的內容解碼之后進行修改，再進行編碼，最后加上之前的簽名組合形成新的JWT的話，那么服務器端會判斷出新的頭部和負載形成的簽名和JWT附帶上的簽名是不一樣的，如果要對新的頭部和負載進行簽名，在不知道服務器加密時用的密鑰的話，得出來的簽名也是不一樣的，
- 差異比較
Session方式存盤用戶id的最大弊病在于Session是存盤在服務器端的，所以需要占用大量服務器記憶體，對于較大型應用而言可能還要保存許多的狀態，一般而言，大型應用還需要借助一些KV資料庫和一系列快取機制來實作Session的存盤，
JWT方式將用戶狀態分散到了客戶端中，可以明顯減輕服務端的記憶體壓力，除了用戶id之外，還可以存盤其他的和用戶相關的資訊，例如該用戶是否是管理員、用戶所在的分組等，雖說JWT方式讓服務器有一些計算壓力（例如加密、編碼和解碼），但是這些壓力相比磁盤存盤而言可能就不算什么了，具體是否采用，需要在不同場景下用資料說話
- 單點登錄
Session方式來存盤用戶id，一開始用戶的
Session只會存盤在一臺服務器上，對于有多個子域名的站點，每個子域名至少會對應一臺不同的服務器，例如：www.taobao.com，nv.taobao.com，nz.taobao.com，login.taobao.com，所以如果要實作在login.taobao.com登錄后，在其他的子域名下依然可以取到Session，這要求我們在多臺服務器上同步Session，使用JWT的方式則沒有這個問題的存在，因為用戶的狀態已經被傳送到了客戶端，
JWT認證流程
- 首先，前端通過Web表單將自己的用戶名和密碼發送到后端的介面，這一程序一般是一個
HTTP POST請求，建議的方式是通過SSL加密的傳輸（https協議），從而避免敏感資訊被嗅探， - 后端核對用戶名和密碼成功后，將用戶的id等其他資訊作為
JWT Payload（負載），將其與頭部分別進行Base64編碼拼接后簽名，形成一個JWT，形成的JWT就是一個形同hhh.ppp.sss的字串， - 后端將
JWT字串作為登錄成功的回傳結果回傳給前端，前端可以將回傳的結果保存在localStorage或sessionStorage上，退出登錄時前端洗掉保存的JWT即可， - 前端在每次請求時將
JWT放入HTTP Header中的Authorization位，(解決XSS和XSRF問題) - 后端檢查是否存在，如存在驗證
JWT的有效性，例如，檢查簽名是否正確；檢查JWT是否過期；檢查JWT的接收方是否是自己 - 驗證通過后后端使用
JWT中包含的用戶資訊進行其他邏輯操作，回傳相應結果，
Vue前端
Vue-router
成功登錄時，將后端回傳的jwt存入sessionStorage
使用Vue-router在前端每次界面切換前都判斷jwt，不符合要求則跳轉至login登錄界面
// 路由守護
router.beforeEach((to, from, next)=>{
const accessToken = window.sessionStorage.getItem('accessToken')
if(accessToken)
{
// 重新登錄后，轉到之前的頁面
if(Object.keys(from.query).length !== 0)
{
let redirect = from.query.redirect
if(to.path === redirect) // 解決無限回圈問題
{
next()
}
else
{
next({path:redirect}) // 重新登錄后，轉到之前的頁面
}
}
}
if(accessToken && to.path !== '/login')
{
// 有token 但不是去 login頁面
next()
}
else if(accessToken && to.path === '/login')
{
//用戶已經登陸，不讓訪問Login登錄界面
next({path: from.fullPath})
}
else if(!accessToken && to.path !== '/login')
{
// 未登錄
next('/login')
}
else
{
next()
}
})
axios
axios 全域配置攔截器
request攔截器每次向后端請求攜帶header頭Authorization資訊
// http request 攔截器
axios.interceptors.request.use(
config =>{
if(sessionStorage.getItem("accessToken"))
{
config.headers.Authorization = sessionStorage.getItem("accessToken")
}
return config;
},
err => {
return Promise.reject(err);
}
)
response攔截器若接收到403錯誤，則是未登錄，無權訪問，則清除sessionStorage資訊并跳轉至login登錄界面
/ http response 攔截器
axios.interceptors.response.use(
response => {
return response;
},
error => {
if(error.response){
console.log('axios:' + error.response.status);
switch(error.response.status){
case 403:
// 回傳403 清除token資訊并跳轉到登錄頁面
sessionStorage.clear()
router.replace({
path: '/login',
query: {redirect: router.currentRoute.fullPath} // 重新登錄后，回傳之前的頁面
})
Message({showClose:true, message:'未登錄，回傳登陸界面', type:'error', duration:3000})
}
}
return Promise.reject(error); // 回傳介面的錯誤資訊
}
)
Flask后端
-
安裝PyJWT
pip install PyJWT -
撰寫JWT生成函式與解密函式(
util.py)key = "123456" # secret私鑰,可通過組態檔匯入 def generate_access_token(username: str = "", algorithm: str = 'HS256', exp: float = 2): """ 生成access_token :param username: 用戶名(自定義部分) :param algorithm: 加密演算法 :param exp: 過期時間 :return:token """ now = datetime.utcnow() exp_datetime = now + timedelta(hours=exp) access_payload = { 'exp': exp_datetime, 'flag': 0, #標識是否為一次性token，0是，1不是 'iat': now, # 開始時間 'iss': 'leon', # 簽名 'username': username #用戶名(自定義部分) } access_token = jwt.encode(access_payload, key, algorithm=algorithm) return access_token def decode_auth_token(token: str): """ 解密token :param token:token字串 :return: """ try: payload = jwt.decode(token, key=key, algorithms='HS256') except (jwt.ExpiredSignatureError, jwt.InvalidTokenError, jwt.InvalidSignatureError): return "" else: return payload def identify(auth_header: str): """ 用戶鑒權 """ if auth_header: payload = decode_auth_token(auth_header) if not payload: return False if "username" in payload and "flag" in payload: if payload["flag"] == 0: return payload["username"] else: return False return False -
撰寫登錄保護函式(
util.py)def login_required(f): """ 登錄保護，驗證用戶是否登錄 :param f: :return: """ @wraps(f) def wrapper(*args, **kwargs): token = request.headers.get("Authorization", default=None) if not token: return 'not Login','403 Permission Denied' username = identify(token) if not username: return 'not Login','403 Permission Denied' # return 回應體, 狀態碼, 回應頭 return f(*args, **kwargs) return wrapper
tips: Flask的Response常用回傳 return 回應體, 狀態碼, 回應頭
總結
相關專案
- LeonAuto自動化系統
參考鏈接
-
Flask后端實踐 連載十一 Flask實作JsonWebToken的用戶認證授權
-
前后端分離之JWT（JSON Web Token）的使用
-
前后端分離之JWT用戶認證
-
Cookie、Session、Token那點事兒和前后端分離之JWT用戶認證
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/250040.html
標籤：Python
上一篇：【python學習】詳細解釋Python快速開發貪吃蛇游戲，只需200行代碼
下一篇：溫故而知新--day2