<强>前言强>
最近的新项目中,用户登录需要采用饼干来记住用户,校验身份。所以本文就把实现的过程总结出来分享给大家,需要的朋友们可以参考学习。
<强>在标题中携带authId登录强>
在之前老的项目里,没有采用饼干来记录用户登录状态,而是在请求的头中携带一个身份标识来校验,大致方案如下:
-
<李>客户端使用后请求提交用户,密码给服务端进行登录操作,李>
<李>服务端校验用户是否合法,如果合法将产生一个唯一的身份标识authId,返回给客户端,客户端将此authId存放本地(如localStorage);李>
<李>客户端在每次需要校验身份的请求中,往头中加入这个authId;李>
<李>服务端检测当前的authId是否有效,有效则表示当前用户合法,允许操作,李>
<李>客户端用户登出的时候,发送一个删除请求,告诉服务端用户注销,同时删除本地的authId信息;李>
<李>服务端收到注销请求后,删除当前的authId数据。李>
上面的方案,如果其他客户端知道了这个authId后,可以在其他客户端模拟身份,不安全,因此弃用。
<强>用饼干记住用户强>
新项目中,将采用此文即将介绍的方案,利用饼干来记住用户。主要流程是:
-
<李>客户端使用后请求提交用户,密码给服务端进行登录操作,李>
<李>服务端校验用户是否合法,如果合法将产生一个唯一的身份标识authId,以饼干的形式返回给客户端;李>
<李>客户端再次请求服务端时,会携带此前已经拿到的饼干给服务端,服务端校验是否合法,合法则可以继续操作,李>
<李>客户端用户登出的时候,发送一个删除请求,告诉服务端用户注销,服务端删除登录标识。
李>
,,,,整个过程可以用下面这张图简单表示:
前台用角搭建单页客户端应用,后台用节点搭建服务器、数据存放在mongodb中,这三个技术及饼干基础知识本文不做介绍,感兴趣的同学可以自行了解。
以下的代码都是最简单的get/post请求,但也是最核心的部分,其他有关登录的繁琐操作,感兴趣的同学可以自行补充。
<强>从开始→结束,遇到的问题强>
首先,我用的是最基础的帖子请求,服务端也只是简单的返回数据,部分简单但比较核心的代码如下:
//客户端 http({美元 方法:“文章”, url: http://127.0.0.1:8888/休息/用户, 数据:{名称:“xxx”,密码:“* * *”} })。成功(功能(数据){ 控制台。日志(“登录成功,数据是:”+数据); })。错误(功能(数据){ 控制台。日志('登录错误'); })。然后(函数(){ console.log(参数); });//服务器 var饼干=" authId=" + authId; res.setHeader(“内容类型”、“application/json; charset=utf - 8”); res.setHeader (set - cookie,饼干+”;信息=3600;HttpOnly=false;路径=/?); res.writeHead(200年,{“内容类型”:“文本/普通”});res.end ();
查看chrome调试,发现虽然服务端的饼干推过来了,但整体出了问题,提示如下:
XMLHttpRequest不能加载http://127.0.0.1:8888/休息/用户。应对起飞前的请求没有通过访问控制检查:没有提供“Access-Control-Allow-Origin”的头>//服务器 var饼干=" authId=" + authId; res.setHeader(“内容类型”、“application/json; charset=utf - 8”); res.setHeader (set - cookie,饼干+”;信息=3600;HttpOnly=false;路径=/?);//添加允许跨越的头信息 res.setHeader (‘Access-Control-Allow-Origin’,‘*’); res.setHeader (“Access-Control-Allow-Methods”、“GET、PUT、POST、DELETE选项”); res.writeHead(200年,{“内容类型”:“文本/普通”});res.end ();
解释下上面代码什么意思,第一句主要是允许来自任何域的请求访问,第二句是允许哪些类型的请求访问。加上后再次运行,提示如下: