傳統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（簽名）通過‘.’進行拼接
[Vue+Flask]前後端分離JWT使用者認證授權 header(頭部) 轉Base64
payload(負載) 自定義資訊内容, 不建議存儲敏感資訊(如密碼) 轉Base64
signature(簽名) 一共三部分。轉base64的header和轉base64的payload拼接之後，然後使用header中聲明的加密方式和secret加鹽的方式加密字元串
- 轉Base64的header
- 轉Base64的payload
secret(私鑰)
最後一步簽名的過程，實際上是對頭部以及負載内容進行簽名，防止内容被竄改。如果有人對頭部以及負載的内容解碼之後進行修改，再進行編碼，最後加上之前的簽名組合形成新的JWT的話，那麼伺服器端會判斷出新的頭部和負載形成的簽名和JWT附帶上的簽名是不一樣的。如果要對新的頭部和負載進行簽名，在不知道伺服器加密時用的密鑰的話，得出來的簽名也是不一樣的。
- iss 簽發者
- sub 面向的使用者
- aud 接收jwt的一方
- exp 過期時間(必須大于簽發時間jat)
- nbf 定義在什麼時間之前，該jwt都是不可用的
- jat 簽發時間
- jti 唯一身份辨別，主要用來作為一次性token,進而回避重播攻擊
- alg 加密算法
- typ 類型
- 差異比較
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 -
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