主播楠楠,有机胡萝卜,刘洪涛
前言
最近的新项目中，用户登录需要采用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即可。希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Angular8引入百度Echarts进行图表分析的实现代码
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
angular inputNumber指令输入框只能输入数字的实现
网友评论