前言
最近的新項目中，用戶登錄需要采用cookie來記住用戶，校驗身份。所以本文就把實現的過程總結出來分享給大家，需要的朋友們可以參考學習。
在header中攜帶authId登錄
在之前老的項目里，沒有采用cookie來記錄用戶登錄狀態，而是在請求的header中攜帶一個身份標識來校驗，大致方案如下：
上面的方案，如果其他客戶端知道了這個authId后，可以在其他客戶端模擬身份，不安全，因此棄用。
用cookie記住用戶
新項目中，將采用此文即將介紹的方案–利用cookie來記住用戶。主要流程是：
整個過程可以用下面這張圖簡單表示：
前臺用angular搭建單頁客戶端應用，后臺用node搭建服務器，數據存放在mongodb中，這三個技術及cookie基礎知識本文不做介紹，感興趣的同學可以自行了解。
以下的代碼都是最簡單的get/post請求，但也是最核心的部分，其他有關登錄的繁瑣操作，感興趣的同學可以自行補充。
從開始–>結束，遇到的問題
首先，我用的是最基礎的post請求，服務端也只是簡單的返回數據，部分簡單但比較核心的代碼如下：
// client
$http({
method : 'POST',
url : 'http://127.0.0.1:8888/rest/user',
data : {name: 'xxx',password:'***'}
}).success(function (data) {
console.log('login success,data is:'+data);
}).error(function (data) {
console.log('login error');
}).then(function () {
console.log(arguments);
});
// server
var cookie = "authId=" + authId;
res.setHeader('Content-Type', 'application/json;charset=utf-8');
res.setHeader('Set-Cookie', cookie + ';Max-Age=3600;HttpOnly=false;Path=/;');
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end();
查看chrome調試，發現雖然服務端的cookie推過來了，但整體出了問題，提示如下：
XMLHttpRequest cannot load http://127.0.0.1:8888/rest/user. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:62427' is therefore not allowed access.
分析問題后，發現原因是來自客戶端的請求不能跨域訪問服務端的請求，請求的資源header中沒有攜帶允許跨越請求的信息。根據這個提示，我們把服務端的代碼稍加改進后，如下：
// server
var cookie = "authId=" + authId;
res.setHeader('Content-Type', 'application/json;charset=utf-8');
res.setHeader('Set-Cookie', cookie + ';Max-Age=3600;HttpOnly=false;Path=/;');
// 添加允許跨越的頭信息
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end();
解釋下上面代碼什么意思，第一句主要是允許來自任何域的請求訪問，第二句是允許哪些類型的請求訪問。加上后再次運行，提示如下：
XMLHttpRequest
cannot load http://127.0.0.1:8888/rest/user. Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
原因是來自客戶端的請求中，Content-Type頭字段，在服務端的響應信息的頭中，沒有攜帶，再次修改代碼如下：
// server
var cookie = "authId=" + authId;
res.setHeader('Content-Type', 'application/json;charset=utf-8');
res.setHeader('Set-Cookie', cookie + ';Max-Age=3600;HttpOnly=false;Path=/;');
// 添加允許跨越的頭信息
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
// 添加支持Content-Type允許的頭信息
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end();
再次運行代碼，發現沒有錯誤提示，但是當我們再次請求服務器時，發現客戶端的請求并沒有攜帶cookie信息，這顯然不是我們想要的效果：
在查閱了一段時間后了解到，客戶端是會默認攜帶cookie給服務端的，但是當客戶端的請求是跨域請求時，由于跨域請求本身就有風險，而攜帶給cookie同樣有風險。
因此在進行跨域訪問時，客戶端不會將服務端返回的cookie攜帶。此時，我們需要同時在客戶端和服務端都設置“withCredentials”為true，代碼如下：
// client
$http({
method : 'POST',
url : 'http://127.0.0.1:8888/rest/user',
withCredentials: true
data : {name: 'xxx',password:'***'}
}).success(function (data) {
console.log('login success,data is:'+data);
}).error(function (data) {
console.log('login error');
}).then(function () {
console.log(arguments);
});
// server
var cookie = "authId=" + authId;
res.setHeader('Content-Type', 'application/json;charset=utf-8');
res.setHeader('Set-Cookie', cookie + ';Max-Age=3600;HttpOnly=false;Path=/;');
// 添加允許跨越的頭信息
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
// 添加支持Content-Type允許的頭信息
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
// 設置已攜帶憑證為true
//res.setHeader('Access-Control-Allow-Credentials', true);
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end();
運行后，發現又有錯誤提示，如下：
XMLHttpRequest cannot load http://127.0.0.1:8888/rest/user. Response to preflight request doesn't pass access control check: A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://localhost:62427' is therefore not allowed access.
分析錯誤后發現，原因是當設置了已攜帶憑證參數為true時，允許跨域請求的源不能設置為泛型的“*”，因此我們再次修改代碼如下：(最終代碼)
// client
$http({
method : 'POST',
url : 'http://127.0.0.1:8888/rest/user',
withCredentials: true
data : {name: 'xxx',password:'***'}
}).success(function (data) {
console.log('login success,data is:'+data);
}).error(function (data) {
console.log('login error');
}).then(function () {
console.log(arguments);
});
// server
var cookie = "authId=" + authId;
res.setHeader('Content-Type', 'application/json;charset=utf-8');
res.setHeader('Set-Cookie', cookie + ';Max-Age=3600;HttpOnly=false;Path=/;');
// 添加允許跨越的頭信息
// res.setHeader('Access-Control-Allow-Origin', '*');
// 用當前的客戶端origin來取代泛型的“*”
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:62427');
res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
// 添加支持Content-Type允許的頭信息
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
// 設置已攜帶憑證為true
res.setHeader('Access-Control-Allow-Credentials', true);
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end();
此時，第一次請求服務端時，服務端返回cookie信息，以后每次客戶端請求服務端，客戶端的header中都會攜帶cookie信息，效果如下圖：
最后
以上就是在使用cookie記住用戶身份時遇到的一些問題及簡單解決方法，一般在angular應用中，可能使用較多的是resoure進行http通信，此時只要在GET/POST/PUT/DELETE等請求的參數中，將“withCredentials”設置為true即可。希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
