首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【融职培训】Web前端学习 第5章 node基础教程9 cookie与session

【融职培训】Web前端学习 第5章 node基础教程9 cookie与session

作者头像
学习猿地
发布2020-06-22 16:39:57
4150
发布2020-06-22 16:39:57
举报
文章被收录于专栏:学习猿地学习猿地

一、cookie与session概述

在说cookie与session的概念之前,我们讨论一个问题,那就是如何保持用户的登录状态。

在之前的课程中,客户端向服务器发送的每一次请求都是独立的,但是当我们访问一些电商网站的时候,可能会发现,当我登录之后,再访问自己的购物车时,确实可以找到自己所添加的商品,也就是说网站保持了我们的登录状态。

二、cookie

概述

网站服务器程序可以在浏览器中写入cookie,然后浏览器再次访问这个网站时,就会带着这个cookie。

实例代码如下所示

1 router.get("/", async ctx => {
2     ctx.cookies.set("username","xiaoming");
3     ctx.body = "hello cookie";
4 })

可以在chrome调试工具中的network选项卡查看cookie内容

写入cookie之后,这个浏览器再次访问这个网站的任何一个页面,都会带着这个cookie。

通过maxAge可以设置cookie过期的毫秒数,实例代码如下所示

1 ctx.cookies.set("username","xiaoming",{
2     maxAge:5000 //过期时间设置为五秒
3 })

可以通过下面的方法获取cookie。

1 router.get("/images", async ctx => {
2     let usr = ctx.cookies.get("username");
3     ctx.body = usr;
4 })

记录网页访问次数

利用cookie,可以记录客户端访问浏览器的次数,实例代码如下所示:

 1 router.get("/count", async ctx => {
 2     let count = ctx.cookies.get("count");
 3     if(count > 0){
 4         count = ++count;
 5         ctx.cookies.set("count",count,{
 6             maxAge:2000
 7         });
 8     }else{
 9         count = 1;
10         ctx.cookies.set("count",1);
11     }
12     ctx.body = count
13 })

三、session

概述

利用cookie在客户端存储数据是完全透明的,如果存储一些用户信息,会导致很严重的安全问题,所以为了记录用户的登录状态,需要使用cookie与session结合的方式。

cnpm install --save koa-session

例如给session设置一个count属性,可以直接通过赋值的方式

ctx.session.count = 0;

获取也可以使用相同的方法

let count = ctx.session.count

记录网页访问次数

 1 const session = require("koa-session");
 2 //加密的密钥,服务器通过加密的cookie获取session
 3 app.keys = ['secret'];
 4 app.use(session({
 5     maxAge:2000,
 6 },app))
 7 
 8 router.get("/session", async ctx => {
 9     if(ctx.session.count>0){
10         ctx.session.count = ++ctx.session.count;
11     }else{
12         ctx.session.count = 1
13     }
14     ctx.body = ctx.session.count
15 })

四、登录验证

  • 首页:任何人都可以访问
  • 登录页:提供表单,用户可以通过表单输入登录信息。
  • 视频页:登录成功后可查看,并提供注销功能。
 1 //处理表单
 2 router.post("/login", async ctx => {
 3     let username = ctx.request.body.username;
 4     let password = ctx.request.body.password;
 5     if(username == "admin" && password == "123456"){
 6         ctx.session.username = username
 7         ctx.redirect("/video")
 8     }else{
 9         ctx.redirect("/")
10     }
11 })
12 
13 //视频页
14 router.get("/video", async ctx => {
15     console.log(ctx.session.username)
16     if(ctx.session.username){
17         await ctx.render("c",{username:ctx.session.username})
18     }else{
19         ctx.redirect("/")
20     }
21 })
22 //表单页面
23 router.get("/login", async ctx => {
24     await ctx.render("index")
25 })
26 //注销
27 router.get("/logout", async ctx => {
28     ctx.session.username = ""
29     ctx.redirect("/")
30 })

五、课后练习

在上一节的课后练习基础上,实现融职教育的登录功能,要求如下

  1. 点击登录按钮,跳转至表单页面,输入用户名和密码后即实现登录效果。
  2. 登陆后,任何一个页面都可以显示用户名。
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-06-19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、cookie与session概述
  • 二、cookie
  • 三、session
  • 四、登录验证
  • 五、课后练习
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档