前言
最近的新项目中,用户登录需要采用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即可。希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
本文向大家介绍Java struts2 validate用户登录校验功能实现,包括了Java struts2 validate用户登录校验功能实现的使用技巧和注意事项,需要的朋友参考一下 首先贴一下搭配的环境: 配置: Eclipse4.3.2 jdk1.7_45 Mysql 5.0+ 然后切入正题: 1、login.jsp 主要是使用OGNL 标签 也可使用html form表单,调用Login
本文向大家介绍java 验证用户是否已经登录与实现自动登录方法详解,包括了java 验证用户是否已经登录与实现自动登录方法详解的使用技巧和注意事项,需要的朋友参考一下 验证用户是否已经登录 配置到web.xml中且对jsps/*进行过虑: 实现自动登录 自动登录,是为了帮助用户多次使用这个网页时,不用再次输入用户名和密码就可以登录。 是指用户将用户的登录信息,人,保存到本地的文件中Cookie中。
本文向大家介绍Linux curl表单登录或提交与cookie使用详解,包括了Linux curl表单登录或提交与cookie使用详解的使用技巧和注意事项,需要的朋友参考一下 前言 本文主要讲解通过curl 实现表单提交登录。单独的表单提交与表单登录都差不多,因此就不单独说了。 说明:针对curl表单提交实现登录,不是所有网站都适用,原因是有些网站后台做了限制或有其他校验。我们不知道这些网站后台的
本文向大家介绍VeeValidate在vue项目里表单校验应用案例,包括了VeeValidate在vue项目里表单校验应用案例的使用技巧和注意事项,需要的朋友参考一下 VeeValidate是什么: VeeValidate是Vue.js的验证库,它有很多验证规则,并支持自定义规则。它基于模板,因此它与HTML5验证API相似并且很熟悉。您可以验证HTML5输入以及自定义Vue组件。它也是以本地化为
本文向大家介绍koa2 用户注册、登录校验与加盐加密的实现方法,包括了koa2 用户注册、登录校验与加盐加密的实现方法的使用技巧和注意事项,需要的朋友参考一下 加密与解密 先介绍一下关于服务端用户名跟密码的存储状态,我们知道当前端在注册一个新用户时,会在表单内填入用户名和密码,并通过post请求提交到服务器,服务器再把用户名和密码从ctx.request.body中拿出来,存入到数据库的一张表里
本文向大家介绍Java用户登录验证代码,包括了Java用户登录验证代码的使用技巧和注意事项,需要的朋友参考一下 废话不多说了,关键代码如下所示: 以上所述是小编给大家介绍的Java用户登录验证代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持!