node之blog实战11(使用cookie保存用户信息、登陆状态+退出功能)

目前为止,已经可以通过AJAX成功登陆,但此时任然存在问题,即刷新页面时,登陆状态消息... ...

 

刷新页面后,登陆状态消息,此时又会回到登录前状态

 

原因分析:登陆成功后,并没有相关数据操作去记录登录状态,所以接下来做个操作,登录成功后,将登录状态返回给浏览器客户端。

此时便需要用到一个模块cookie来记录登录状态

(1)下载引入cookie模块

  

  接下来直接引入(入口文件app.js引入)

  

 

   接下来开始配置cookie

  

 

(2)配置cookie

  这里需要用到万能中间件,即只要进来便匹配调用

  

 

   注意位置:一定要放在挂载路由到服务实例前

  1、创建cookies对象,将cookies方法加载到req对象上

  

因为在其他路由模块admin、api、/里,也会用到用户登录信息cookie。此外,还有发表留言、发表评论、后台管理等... ...都需要验证用户是否登录。
因为这里便将cookie挂载到req全局对象上,让任何方法都可以访问

   接下来通过对象下的set和get方法来设置和获取cookie

  

 

   登录成功,数据库验证通过后,服务端发送cookie到客户端。

浏览器得到cookie信息后,进行保存。 以后只要访问该站点,便会将保存的cookie通过头信息的方式,发送给服务端。
服务端就会得到头信息,并且通过其去判断当前是否是登录状态

  接下来设置添加cookie

  

 

   

  

(3)设置cookie后验证

  如上所述,已经在登录成功时设置了cookie,并将响应发送给了客户端,接下来了做下测试

  

 

   登录成功后,查看刚才的响应

  

 

   服务端除了发送响应结果外,还多了个Cookies选项。其中有一个cookie信息叫userCookieInfo,这便是刚才从服务端传给客户端的。客户端收到后便会保存到本地。

  

 

  下一次刷新页面时,便会将cookie信息放到头信息当中,发送给服务端。接下来再次刷新页面,查看请求头信息

  

 

   查看Request Headers请求头,会发现,里面有个Cookie选项,这便是浏览器在请求网站时,发送给服务端的信息。

  接下来服务端便会得到头信息的内容,如下所示

  

 

   接下来刷新页面,服务端输出如下

  

 

 

(4)获取解析登录用户的cookie信息

   接下来进行判断

因为在其他路由模块admin、api、/里,也会用到用户登录信息cookie。此外,还有发表留言、发表评论、后台管理等... ...都需要验证用户是否登录。
因为这里便将cookie挂载到req全局对象上,让任何方法都可以访问

  解析登录用户的cookie信息

  

 

   

 

(5)模板编译

  接下来要借助模板引擎去实现样式的管理,即登录成功状态下隐藏登录框。在渲染模板时,将用户信息分配到模板

  

 

   接下来在模板里使用该变量

  

   然后将之前的css设置去掉

  

 

   接下来刷新页面如下

  

 

   接下来去除cookie,再次刷新页面

  

 

   

原因:
    再次刷新时,浏览器便会重新发送请求到服务器,此时请求头里并不包含cookie信息,此时服务端便会知道当前是未登录的,此时userCookieInfo便是空对象,渲染时便渲染的是登录框。

  此时登录成功后的逻辑也做下改变,不再需要去隐藏谁,直接刷新页面即可。刷新时会重新发请求,渲染的便是登录状态。这里直接重载页面

   

 

   接着改下模板代码,读物用户信息,进行展示

  

 

   效果如下

  

 

   此时登录成功后,随意刷新页面,用户登录状态不会消失了。

 

(6)退出功能

  接下来做下退出功能

  1、编写模板

  

 

   2、绑定事件

  

 

   3、处理路由

  

 

   验证如下:

  ①登录状态

    

 

     

 

   ②点击退出,页面刷新,退出登录状态,且cookie清空

    

 

     

 

   4、其他方法→同步表单处理

因为这里不涉及其他操作,所以在退出时,可以使用同步操作。同步操作可以在服务端重定向,异步操作无法在服务端重定向

    修改如下:注意路径

    

     接下来不用ajax所以注释

    

 

     服务端重定向

    

 

 

    

 

 

 

 

 

 

 

 

.

posted @ 2020-02-14 12:12  剑仙6  阅读(293)  评论(0编辑  收藏  举报
欢迎访问个人网站www.qingchun.在线