前後端分離下如何登入

1.1 http無狀態性

http是無狀態的，一次請求結束，連線斷開，下次伺服器再收到請求，它就不知道這個請求是哪個使用者發過來的。當然它知道是哪個客戶端位址發過來的，但是對於我們的應用來說，我們是靠使用者來管理，而不是靠客戶端。所以對我們的應用而言，它是需要有狀態管理的，以便服務端能夠準確的知道http請求是哪個使用者發起的，從而判斷該使用者是否有許可權繼續這個請求。這個過程就是常說的會話管理。

1.2 登入流程

登入的基本流程

2.1 基於session登入

伺服器端使用session技術，瀏覽器端使用cookie技術。

服務端session是使用者第一次訪問應用時，伺服器就會建立的物件，代表使用者的一次會話過程，可以用來存放資料。伺服器為每乙個session都分配乙個唯一的sessionid，以保證每個使用者都有乙個不同的session物件。

伺服器在建立完session後，會把sessionid通過cookie返回給使用者所在的瀏覽器，這樣當使用者第二次及以後向伺服器傳送請求的時候，就會通過cookie把sessionid傳回給伺服器，以便伺服器能夠根據sessionid找到與該使用者對應的session物件。

session通常有失效時間的設定，比如2個小時。當失效時間到，伺服器會銷毀之前的session，並建立新的session返回給使用者。但是只要使用者在失效時間內，有傳送新的請求給伺服器，通常伺服器都會把他對應的session的失效時間根據當前的請求時間再延長2個小時。

session在一開始並不具備會話管理的作用。它只有在使用者登入認證成功之後，並且往sesssion物件裡面放入了使用者登入成功的憑證，才能用來管理會話。管理會話的邏輯也很簡單，只要拿到使用者的session物件，看它裡面有沒有登入成功的憑證，就能判斷這個使用者是否已經登入。當使用者主動退出的時候，會把它的session物件裡的登入憑證清掉。所以在使用者登入前或退出後或者session物件失效時，肯定都是拿不到需要的登入憑證的。

2.2 基於token登入

使用者在瀏覽器中輸入使用者和密碼，後台伺服器通過加密或者其他邏輯，生成乙個token。

前端獲取到token，儲存到cookie或者localstorage中，在接下來的請求中，將token通過url引數或者http header頭部傳入到伺服器

伺服器獲取token值，通過查詢資料庫判斷當前token是否有效

基於token登入，而且可以用於第三方單點登入的oauth2.0更適合。可以參考**：理解oauth 2.0

token傳入示例：

簡單地說，cookie 就是瀏覽器儲存在使用者電腦上的一小段文字檔案。cookie 是純文字格式，不包含任何可執行的**。乙個 web 頁面或伺服器告知瀏覽器按照一定規範來儲存這些資訊，並在隨後的請求中將這些資訊傳送至伺服器，web 伺服器就可以使用這些資訊來識別不同的使用者。大多數需要登入的**在使用者驗證成功之後都會設定乙個 cookie，只要這個 cookie 存在並可以，使用者就可以自由瀏覽這個**的任意頁面。再次說明，cookie 只包含資料，就其本身而言並不有害。

同域情況下，cookie會在隨後的請求中攜帶

跨越定義:由於瀏覽器同源策略，凡是傳送請求的url的協議(http和https)、網域名稱（www.example.com,about.example.com）、埠(8010和8020)三者之間任意乙個與當前頁面位址不同則視為跨域。

4.1 解決同源策略

基於session和token登入都要解決。

瀏覽器的同源策略

如果使用同域的方法，那麼瀏覽器會丟擲如下錯誤。demo示例，前端執行在http://localhost:8010/login.html，後台執行在http://localhost:8020/api/login.php

需要在伺服器端設定header，以php為例：

header('access-control-allow-origin: http://localhost:8010');

設定完成之後，可以傳送請求了，登入成功之後跳轉到home.html還是顯示未登入，會跳轉到login.html頁面。效果如下圖：

4.2 解決請求帶上cookie資訊

基於session登入才需要，因為相關資訊是通過cookie傳入，如果是通過url傳入，也不需要解決這個。基於token，後續請求攜帶token都是通過header裡面的字段，所以也不需要解決這個。

跨越情況下，瀏覽器此時不會預設在後續請求裡面攜帶上cookie資訊，這個時候前後端都需要設定。以jquery和php為列。

前端jquery**

ajax請求中藥設定xhrfields

xhrfields:

完整**如下：

$.ajax(,
datatype: "json",
xhrfields: 
}).done(function (response) ).fail(function (jqxhr, textstatus) );

後端php**

/*需要設定這一行，接收傳入credentials欄位*/

http無狀態協議和cookie、session原理

http cookies 詳解

3種web會話管理的方式

你會做web上的使用者登入功能嗎？

angular和jquery的 withcredentials用法

前後端分離下如何登入

前後端分離模式下的登入認證授權

前後端分離

前後端分離

相關推薦