1 Web登錄涉及到知識點
1.1 HTTP無狀態(tài)性
HTTP是無狀態(tài)的缸剪，一次請求結(jié)束躺率，連接斷開溉瓶，下次服務器再收到請求，它就不知道這個請求是哪個用戶發(fā)過來的重绷。當然它知道是哪個客戶端地址發(fā)過來的沸停，但是對于我們的應用來說，我們是靠用戶來管理昭卓，而不是靠客戶端愤钾。所以對我們的應用而言，它是需要有狀態(tài)管理的候醒，以便服務端能夠準確的知道http請求是哪個用戶發(fā)起的能颁，從而判斷該用戶是否有權(quán)限繼續(xù)這個請求。這個過程就是常說的會話管理倒淫。
1.2 登錄流程
登錄的基本流程
2 同域登錄
目前大多數(shù)Web應用采用前后端分離方式進行開發(fā)劲装。所以前端網(wǎng)站或應用都屬于SPA（Single Page Application）。如果前端昌简，后臺API部署在同域下占业，不存在跨域的情況，登錄方式相對簡單纯赎。
2.1 基于Session登錄
服務器端使用Session技術(shù)谦疾，瀏覽器端使用Cookie技術(shù)。
1.服務端session是用戶第一次訪問應用時犬金，服務器就會創(chuàng)建的對象念恍，代表用戶的一次會話過程，可以用來存放數(shù)據(jù)晚顷。服務器為每一個session都分配一個唯一的sessionid峰伙，以保證每個用戶都有一個不同的session對象。
2.服務器在創(chuàng)建完session后该默，會把sessionid通過cookie返回給用戶所在的瀏覽器瞳氓，這樣當用戶第二次及以后向服務器發(fā)送請求的時候，就會通過cookie把sessionid傳回給服務器栓袖，以便服務器能夠根據(jù)sessionid找到與該用戶對應的session對象匣摘。
3.session通常有失效時間的設定店诗，比如2個小時。當失效時間到音榜，服務器會銷毀之前的session庞瘸，并創(chuàng)建新的session返回給用戶。但是只要用戶在失效時間內(nèi)赠叼，有發(fā)送新的請求給服務器擦囊，通常服務器都會把他對應的session的失效時間根據(jù)當前的請求時間再延長2個小時。
4.session在一開始并不具備會話管理的作用嘴办。它只有在用戶登錄認證成功之后霜第，并且往sesssion對象里面放入了用戶登錄成功的憑證，才能用來管理會話户辞。管理會話的邏輯也很簡單，只要拿到用戶的session對象癞谒，看它里面有沒有登錄成功的憑證底燎，就能判斷這個用戶是否已經(jīng)登錄。當用戶主動退出的時候弹砚，會把它的session對象里的登錄憑證清掉双仍。所以在用戶登錄前或退出后或者session對象失效時，肯定都是拿不到需要的登錄憑證的桌吃。
2.2 基于Token登錄
1.用戶在瀏覽器中輸入用戶和密碼朱沃，后臺服務器通過加密或者其他邏輯，生成一個Token茅诱。
2.前端獲取到Token逗物，存儲到cookie或者localStorage中，在接下來的請求中瑟俭，將token通過url參數(shù)或者HTTP Header頭部傳入到服務器
3.服務器獲取token值翎卓，通過查找數(shù)據(jù)庫判斷當前token是否有效
基于Token登錄，而且可以用于第三方單點登錄的OAuth2.0更適合摆寄∈П可以參考網(wǎng)址：理解OAuth 2.0
3 Cookie的傳輸
簡單地說，cookie 就是瀏覽器儲存在用戶電腦上的一小段文本文件微饥。cookie 是純文本格式逗扒，不包含任何可執(zhí)行的代碼。一個 Web 頁面或服務器告知瀏覽器按照一定規(guī)范來儲存這些信息欠橘，并在隨后的請求中將這些信息發(fā)送至服務器矩肩，Web 服務器就可以使用這些信息來識別不同的用戶。大多數(shù)需要登錄的網(wǎng)站在用戶驗證成功之后都會設置一個 cookie肃续，只要這個 cookie 存在并可以蛮拔，用戶就可以自由瀏覽這個網(wǎng)站的任意頁面述暂。再次說明，cookie 只包含數(shù)據(jù)建炫，就其本身而言并不有害畦韭。
同域情況下，Cookie會在隨后的請求中攜帶
4 跨域登錄
跨越定義 :由于瀏覽器同源策略肛跌，凡是發(fā)送請求的url的協(xié)議(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為例：
<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>
設置完成之后砖织，可以發(fā)送請求了，登錄成功之后跳轉(zhuǎn)到home.html還是顯示未登錄末荐，會跳轉(zhuǎn)到login.html頁面
4.2 解決請求帶上Cookie信息
基于Session登錄才需要侧纯，因為相關(guān)信息是通過Cookie傳入，如果是通過url傳入甲脏，也不需要解決這個眶熬。基于Token块请，后續(xù)請求攜帶token都是通過header里面的字段娜氏，所以也不需要解決這個。
跨越情況下墩新，瀏覽器此時不會默認在后續(xù)請求里面攜帶上Cookie信息牍白，這個時候前后端都需要設置。以jQuery和PHP為列抖棘。
前端jQuery代碼
Ajax請求設置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;">/*
需要設置這一行茂腥，接收傳入Credentials字段*/header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Origin: http://localhost:8010');</pre>
