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方法中,以后我们都调用这个共通方法,也就自然都会走验证环节啦。

参考一下伪代码:

好了好了,真结束了。

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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171222G0OZRS00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券