前端應該知道的web登入

2021-09-21 01:21:03 字數 2061 閱讀 8269

還記得在上家公司做全乾工程師的時候,基本從頁面寫到運維,當時做登入這塊的時候,被session、cookie、token各種概念差點整矇圈了,上網查詢相關概念,發現很多人都是類似的疑惑,比如:

首先這是因為http是無狀態的協議,所謂無狀態就是在兩次請求之間伺服器並不會儲存任何的資料,相當於你和乙個人說一句話之後他就把你忘掉了。所以,登入就是用某種方法讓伺服器在多次請求之間能夠識別出你,而不是每次發請求都得帶上使用者名稱密碼這樣的識別身份的資訊。 從登入成功到登出的這個過程,伺服器一直維護了乙個可以識別出使用者資訊的資料結構,廣義上來說,這個過程就叫做session,也就是保持了乙個會話。

廣義的session:廣義的session就是從登入成功到登出的過程,在這個過程中客戶端和伺服器端維持了保持登入的狀態,至於具體怎麼維持住這種登入的狀態,沒有要求。

狹義的session:狹義的session就是登入成功後,伺服器端儲存了一些必須的使用者資訊,這部分存在伺服器端的使用者資訊就叫做session,也就是接下來要說的第一種登入的實現方式。

先用圖來看:

詳細說的說一下,這裡面主要是這麼幾個過程:

客戶端帶著使用者名稱和密碼去訪問 /login 介面,伺服器端收到後校驗使用者名稱和密碼,校驗正確就會在伺服器端儲存乙個sessionid和session的對映關係

伺服器端返回response,並且將sessionid以set-cookie的方式種在客戶端,這樣一來,sessionid就存在了客戶端。這裡要注意的是,將sessionid存在cookie並不是一種強制的方案,而是大家一般都這麼做,而且發請求的時候符合domain和path的時候,會自動帶上cookie,省去了手動塞的過程。

客戶端發起非登入請求時,服務端通過cookie中的sessionid找到對應的session來知道此次請求是誰發出的。

前面說到sessionid的方式本質是把使用者狀態資訊維護在server端,token的方式就是把使用者的狀態資訊加密成一串token傳給前端,然後每次發請求時把token帶上,傳回給伺服器端;伺服器端收到請求之後,解析token並且驗證相關資訊;

所以跟第一種登入方式最本質的區別是:通過解析token的計算時間換取了session的儲存空間

業界通用的加密方式是jwt(json web token),jwt的具體格式如圖:

簡單的介紹一下jwt,它主要由3部分組成:

header 頭部

payload 負載

signature 簽名複製**

header裡面描述加密演算法和token的型別,型別一般都是jwt;

payload裡面放的是使用者的資訊,也就是第一種登入方式中需要維護在伺服器端session中的資訊;

signature是對前兩部分的簽名,也可以理解為加密;實現需要乙個金鑰(secret),這個secret只有伺服器才知道,然後使用header裡面的演算法按照如下方法來加密:

hmacsha256(

base64urlencode(header) + "." +

base64urlencode(payload),

secret)複製**

總之,最後的 jwt = base64url(header) + "." + base64url(payload) + "." + signature

jwt可以放在response中返回,也可以放在cookie中返回,這都是具體的返回方式,並不重要。

authorization: bearer 複製**
這樣子確實也可以解決cookie跨域的問題,不過具體放在哪兒還是根據業務場景來定,並沒有一定之規。

session方式由於會在伺服器端維護session資訊,單機還好說,如果是多機的話,伺服器之間需要同步session資訊,服務橫向擴充套件不方便。

session數量隨著登入使用者的增多而增多,儲存會增加很多。

session+cookie裡面存sessionid的方式可能會有csrf攻擊的問題,常見的方式是使用csrf_token來解決

jwt的過期時間需要結合業務做設定,而且jwt一旦派發出去,後端無法強行使其作廢

每個前端應該知道的jquery 細節

不需要其他外掛程式,簡單通過使用jquery 中的animateandscrolltop方法,就能實現 回到頂部 a.top click function e 800 back to top通過 改變scrolltop的值控制滾動條到達哪個位置 如果你的頁面有很多,並且預設情況下是看不到的,當你滑鼠...

前端應該知道的CSS3 選擇器

將所有margin和padding歸零,不建議使用,增加瀏覽器負擔 適用於子選擇器 選擇 container層中的子元素 container ie firefox chrome safari opera6 id選擇器不能重複使用,盡量避免使用 containerie firefox chrome s...

前端工程師應該知道的Linux知識(一)

隨著業務架構演進,服務端和客戶端的渲染層均交由feer處理,越來越多的前端開始接觸linux,做一些安裝部署nodejs專案之類的工作,本篇的主要內容就是介紹linux下的基礎知識和常用命令,幫助前端工程師在伺服器中自由自在的傲遊。目前網際網路公司使用的發行版主要是如下三個 如何知道一台機器的發行版...