Angular.js與node.js項目里用cookie校驗賬戶登錄詳解

更新時間：2017年02月22日 10:07:06 作者：xishiyi7

這篇文章主要介紹了Angular.js與node.js項目里用cookie校驗賬戶登錄的相關(guān)資料，文中介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。

前言

最近的新項目中，用戶登錄需要采用cookie來記住用戶，校驗身份。所以本文就把實現(xiàn)的過程總結(jié)出來分享給大家，需要的朋友們可以參考學(xué)習(xí)。

在header中攜帶authId登錄

在之前老的項目里，沒有采用cookie來記錄用戶登錄狀態(tài)，而是在請求的header中攜帶一個身份標(biāo)識來校驗，大致方案如下：

客戶端使用post請求提交user、password給服務(wù)端進(jìn)行登錄操作；
服務(wù)端校驗用戶是否合法，如果合法將產(chǎn)生一個唯一的身份標(biāo)識authId，返回給客戶端，客戶端將此authId存放本地(如localStorage)；
客戶端在每次需要校驗身份的請求中，往header中加入這個authId；
服務(wù)端檢測當(dāng)前的authId是否有效，有效則表示當(dāng)前用戶合法，允許操作；
客戶端用戶登出的時候，發(fā)送一個delete請求，告訴服務(wù)端用戶注銷，同時刪除本地的authId信息；
服務(wù)端收到注銷請求后，刪除當(dāng)前的authId數(shù)據(jù)。

上面的方案，如果其他客戶端知道了這個authId后，可以在其他客戶端模擬身份，不安全，因此棄用。

用cookie記住用戶

新項目中，將采用此文即將介紹的方案–利用cookie來記住用戶。主要流程是：

客戶端使用post請求提交user、password給服務(wù)端進(jìn)行登錄操作；
服務(wù)端校驗用戶是否合法，如果合法將產(chǎn)生一個唯一的身份標(biāo)識authId，以cookie的形式返回給客戶端；
客戶端再次請求服務(wù)端時，會攜帶此前已經(jīng)拿到的cookie給服務(wù)端，服務(wù)端校驗是否合法，合法則可以繼續(xù)操作；
客戶端用戶登出的時候，發(fā)送一個delete請求，告訴服務(wù)端用戶注銷，服務(wù)端刪除登錄標(biāo)識。

整個過程可以用下面這張圖簡單表示：

前臺用angular搭建單頁客戶端應(yīng)用，后臺用node搭建服務(wù)器，數(shù)據(jù)存放在mongodb中，這三個技術(shù)及cookie基礎(chǔ)知識本文不做介紹，感興趣的同學(xué)可以自行了解。

以下的代碼都是最簡單的get/post請求，但也是最核心的部分，其他有關(guān)登錄的繁瑣操作，感興趣的同學(xué)可以自行補充。

從開始–>結(jié)束，遇到的問題

首先，我用的是最基礎(chǔ)的post請求，服務(wù)端也只是簡單的返回數(shù)據(jù)，部分簡單但比較核心的代碼如下：

// 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調(diào)試，發(fā)現(xiàn)雖然服務(wù)端的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.

分析問題后，發(fā)現(xiàn)原因是來自客戶端的請求不能跨域訪問服務(wù)端的請求，請求的資源header中沒有攜帶允許跨越請求的信息。根據(jù)這個提示，我們把服務(wù)端的代碼稍加改進(jìn)后，如下：

// 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頭字段，在服務(wù)端的響應(yīng)信息的頭中，沒有攜帶，再次修改代碼如下：

// 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();

再次運行代碼，發(fā)現(xiàn)沒有錯誤提示，但是當(dāng)我們再次請求服務(wù)器時，發(fā)現(xiàn)客戶端的請求并沒有攜帶cookie信息，這顯然不是我們想要的效果：

在查閱了一段時間后了解到，客戶端是會默認(rèn)攜帶cookie給服務(wù)端的，但是當(dāng)客戶端的請求是跨域請求時，由于跨域請求本身就有風(fēng)險，而攜帶給cookie同樣有風(fēng)險。

因此在進(jìn)行跨域訪問時，客戶端不會將服務(wù)端返回的cookie攜帶。此時，我們需要同時在客戶端和服務(wù)端都設(shè)置“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');

// 設(shè)置已攜帶憑證為true
//res.setHeader('Access-Control-Allow-Credentials', true);

res.writeHead(200, {'Content-Type': 'text/plain'});
res.end();

運行后，發(fā)現(xiàn)又有錯誤提示，如下：

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.

分析錯誤后發(fā)現(xiàn)，原因是當(dāng)設(shè)置了已攜帶憑證參數(shù)為true時，允許跨域請求的源不能設(shè)置為泛型的“*”，因此我們再次修改代碼如下：(最終代碼)

// 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', '*');
// 用當(dāng)前的客戶端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');

// 設(shè)置已攜帶憑證為true
res.setHeader('Access-Control-Allow-Credentials', true);

res.writeHead(200, {'Content-Type': 'text/plain'});
res.end();

此時，第一次請求服務(wù)端時，服務(wù)端返回cookie信息，以后每次客戶端請求服務(wù)端，客戶端的header中都會攜帶cookie信息，效果如下圖：

最后

以上就是在使用cookie記住用戶身份時遇到的一些問題及簡單解決方法，一般在angular應(yīng)用中，可能使用較多的是resoure進(jìn)行http通信，此時只要在GET/POST/PUT/DELETE等請求的參數(shù)中，將“withCredentials”設(shè)置為true即可。希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章: