1 Web登錄涉及到知識點
1.1 HTTP無狀態(tài)性
HTTP是無狀態(tài)的，一次請求結(jié)束，連接斷開，下次服務(wù)器再收到請求，它就不知道這個請求是哪個用戶發(fā)過來的。當(dāng)然它知道是哪個客戶端地址發(fā)過來的，但是對于我們的應(yīng)用來說，我們是靠用戶來管理，而不是靠客戶端。所以對我們的應(yīng)用而言，它是需要有狀態(tài)管理的，以便服務(wù)端能夠準確的知道http請求是哪個用戶發(fā)起的，從而判斷該用戶是否有權(quán)限繼續(xù)這個請求。這個過程就是常說的會話管理。
1.2 登錄流程
登錄的基本流程
2 同域登錄
目前大多數(shù)Web應(yīng)用采用前后端分離方式進行開發(fā)。所以前端網(wǎng)站或應(yīng)用都屬于SPA（Single Page Application）。如果前端，后臺API部署在同域下，不存在跨域的情況，登錄方式相對簡單。
2.1 基于Session登錄
服務(wù)器端使用Session技術(shù)，瀏覽器端使用Cookie技術(shù)。
1.服務(wù)端session是用戶第一次訪問應(yīng)用時，服務(wù)器就會創(chuàng)建的對象，代表用戶的一次會話過程，可以用來存放數(shù)據(jù)。服務(wù)器為每一個session都分配一個唯一的sessionid，以保證每個用戶都有一個不同的session對象。
2.服務(wù)器在創(chuàng)建完session后，會把sessionid通過cookie返回給用戶所在的瀏覽器，這樣當(dāng)用戶第二次及以后向服務(wù)器發(fā)送請求的時候，就會通過cookie把sessionid傳回給服務(wù)器，以便服務(wù)器能夠根據(jù)sessionid找到與該用戶對應(yīng)的session對象。
3.session通常有失效時間的設(shè)定，比如2個小時。當(dāng)失效時間到，服務(wù)器會銷毀之前的session，并創(chuàng)建新的session返回給用戶。但是只要用戶在失效時間內(nèi)，有發(fā)送新的請求給服務(wù)器，通常服務(wù)器都會把他對應(yīng)的session的失效時間根據(jù)當(dāng)前的請求時間再延長2個小時。
4.session在一開始并不具備會話管理的作用。它只有在用戶登錄認證成功之后，并且往sesssion對象里面放入了用戶登錄成功的憑證，才能用來管理會話。管理會話的邏輯也很簡單，只要拿到用戶的session對象，看它里面有沒有登錄成功的憑證，就能判斷這個用戶是否已經(jīng)登錄。當(dāng)用戶主動退出的時候，會把它的session對象里的登錄憑證清掉。所以在用戶登錄前或退出后或者session對象失效時，肯定都是拿不到需要的登錄憑證的。
2.2 基于Token登錄
1.用戶在瀏覽器中輸入用戶和密碼，后臺服務(wù)器通過加密或者其他邏輯，生成一個Token。
2.前端獲取到Token，存儲到cookie或者localStorage中，在接下來的請求中，將token通過url參數(shù)或者HTTP Header頭部傳入到服務(wù)器
3.服務(wù)器獲取token值，通過查找數(shù)據(jù)庫判斷當(dāng)前token是否有效
基于Token登錄，而且可以用于第三方單點登錄的OAuth2.0更適合。可以參考網(wǎng)址：理解OAuth 2.0
3 Cookie的傳輸
簡單地說，cookie 就是瀏覽器儲存在用戶電腦上的一小段文本文件。cookie 是純文本格式，不包含任何可執(zhí)行的代碼。一個 Web 頁面或服務(wù)器告知瀏覽器按照一定規(guī)范來儲存這些信息，并在隨后的請求中將這些信息發(fā)送至服務(wù)器，Web 服務(wù)器就可以使用這些信息來識別不同的用戶。大多數(shù)需要登錄的網(wǎng)站在用戶驗證成功之后都會設(shè)置一個 cookie，只要這個 cookie 存在并可以，用戶就可以自由瀏覽這個網(wǎng)站的任意頁面。再次說明，cookie 只包含數(shù)據(jù)，就其本身而言并不有害。
同域情況下，Cookie會在隨后的請求中攜帶
4 跨域登錄
跨越定義 :由于瀏覽器同源策略，凡是發(fā)送請求的url的協(xié)議(http和https)、域名（www.example.com,about.example.com）、端口(8010和8020)三者之間任意一個與當(dāng)前頁面地址不同則視為跨域。
4.1 解決同源策略
基于Session和Token登錄都要解決。
如果使用同域的方法，那么瀏覽器會拋出如下錯誤。demo示例，前端運行在http://localhost:8010/login.html，后臺運行在http://localhost:8020/api/login.php
需要在服務(wù)器端設(shè)置Header，以PHP為例：
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; overflow-wrap: break-word; color: rgb(0, 0, 0); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(254, 254, 242); text-decoration-style: initial; text-decoration-color: initial;">header('Access-Control-Allow-Origin: http://localhost:8010');</pre>
設(shè)置完成之后，可以發(fā)送請求了，登錄成功之后跳轉(zhuǎn)到home.html還是顯示未登錄，會跳轉(zhuǎn)到login.html頁面
4.2 解決請求帶上Cookie信息
基于Session登錄才需要，因為相關(guān)信息是通過Cookie傳入，如果是通過url傳入，也不需要解決這個?；赥oken，后續(xù)請求攜帶token都是通過header里面的字段，所以也不需要解決這個。
跨越情況下，瀏覽器此時不會默認在后續(xù)請求里面攜帶上Cookie信息，這個時候前后端都需要設(shè)置。以jQuery和PHP為列。
前端jQuery代碼
Ajax請求設(shè)置xhrFields
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; overflow-wrap: break-word; color: rgb(0, 0, 0); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(254, 254, 242); text-decoration-style: initial; text-decoration-color: initial;">xhrFields: { withCredentials: true
}</pre>
完整代碼如下：
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; overflow-wrap: break-word; color: rgb(0, 0, 0); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(254, 254, 242); text-decoration-style: initial; text-decoration-color: initial;">$.ajax({
url: "http://localhost:8020/api/login.php",
type: "POST",
data: {
username: $("#username").val(),
password: $("#password").val()
},
dataType: "json",
xhrFields: {
withCredentials: true
}
}).done(function (response) { debugger;
$("#log").html(response.message); window.location.href = "home.html";
}).fail(function (jqXHR, textStatus) { console.log("Request failed: " + textStatus);
});</pre>
后端php代碼
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; overflow-wrap: break-word; color: rgb(0, 0, 0); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(254, 254, 242); text-decoration-style: initial; text-decoration-color: initial;">/*
需要設(shè)置這一行，接收傳入Credentials字段*/header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Origin: http://localhost:8010');</pre>
