傳統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 響應體, 狀態碼, 響應頭