Node篇 4.整合AJAX和Cookie实现登录

关键是代码总是要我截图贴上去，而不是直接copy，所以我以后用有道云笔记来写了。

目前的问题是代码在微信公众号中高亮展示还不够好，微信不自带这个功能，各种格式化插件还在探索中

我们在上一章《[JavaScript从入门到放弃] Node篇 3. NodeJS整合MySQL》中学习了NodeJS操作MySQL，更早之前，我们也学习了路由。这就意味着我们已经把数据库中的数据通过返回出去。

那我们今天，就来整合一下做个登录。使用ajax来访问接口。

首先，把后台代码简单写一写。

==app.js==

这里其实没啥好解释的，主要是引入body-parser，这样才可以接收到post请求的参数，要注意的是，路由的设置要写在bodyparser设置的后面。

==route/user.js==

这里也很简单，如果用户post访问/user/login，就会进入此函数。然后在这个方法中调用dao层方法，传入请求参数以及回调函数，注意我们这里将参数放到了数组中，这是因为前文说过的，SQL多个参数时需要用数组传进去，所以我们在这里就直接传数组了。

==models/user_dao.js==

这里的args就是刚才的传进来的数组了，不需要修改，直接当作第二个参数。然后将查询结果传进回调函数中带出来。这里为啥是result[0]呢，因为result默认是一个数组，而我们语句中查的其实只是一个值，所以直接取数组中第一个元素即可。

==public/login.html==

这里页面随便画一画，我们设置了键盘事件，不管是点按钮还是按回车键，都可以执行登录操作，如果返回1则代表成功了，跳转到主页。

现在不出意外，能跑起来了。

但显然还不够。我们目前，可以通过登录进入主页面，但通过地址栏输入URL也能进入主页面。这说明我们目前做的还是很不完善的。至少进主页面时要判断是否已经登录啊。

但问题是，现在我们用的是html+ajax，并不是jade等模板引擎。所以我们是无法直接获取到服务器端的对象的，啥意思呢？

比如我们在JSP页面中，是可以直接获取Session的。

但显然我们在普通的HTML中是获取不到的，她与后台的联系全靠AJAX支撑。

还好，天无绝人之路。

我们可以使用Cookie来做验证。

Cookie是啥呢？我们可以理解为一种在浏览器中的缓存机制。就是我可以把一些少量的数据放到cookie中，存进浏览器。在有效期（可设置）内，我们直接可以用JS获取到这个cookie。比如当前登录用户的昵称啊，头像啊等等。直接从cookie中拿，就不用每次都到后台再取一次了。各网站的Cookie不互通。

要注意的是：cookie只能存4KB的数据大小，而且是字符串。而且Cookie文件可以被找到，所以不能存隐私数据。

OK，我们现在可以利用Cookie的这个特性，来存储我们的用户基本信息，要注意思路要搞清楚。

==不是把用户名密码存在Cookie中每次去比对，而是登录时把读到的用户基本信息存进Cookie。以后在各个需要验证的页面中，只要判断这个Cookie存不存在就行了。不存在代表没有经过登录授权，存在就说明OK，就可以直接使用了==

这个插件很简单，简单到不需要介绍，我们直接使用吧。

==login.html==

==index.html==

如果你愿意，其实还可以在跳转回登录这个地方，加上一个参数，比如叫login.html?returnUrl=index.html。

这样我们就可以做点事情了，登录后，通过获取参数，再跳回原页面。

最后，要注意的是，很多人只做了页面级的拦截，实际上这样是不安全的。我们应该在所有需要登录才能操作的请求中加入登录验证。比如一个常见的场景，大家都用过微博。我们如果同时打开两个微博页面，在其中一个页面上点击退出微博账号，在另一个页面中，是没办法评论点赞的。

所以我们要在几乎所有的AJAX请求中都加入验证，显然不能写那么多重复代码嘛。可以参见我前面写的《[XJBG系列] 封装一下jquery.ajax当插件吧，为了少些几行代码》，将验证拦截过程写在封装起来的共通AJAX方法中，以后我们都调用这个共通方法，也就自然都会走验证环节啦。

参考一下伪代码：

好了好了，真结束了。

难度不大，大家看着玩吧。