专栏首页学习猿地Web前端学习 第5章 node基础教程9 cookie与session
原创

Web前端学习 第5章 node基础教程9 cookie与session

一、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. 登陆后,任何一个页面都可以显示用户名。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

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

我来说两句

0 条评论
登录 后参与评论

相关文章

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

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

    学习猿地
  • Web前端学习 第5章 node基础教程6 Koa基础

    Koa是一个基于Node的web服务器开发框架,通过Koa我们可以更便捷第开发web服务器。不必像上一节那样刀耕火种地从零开始写。

    学习猿地
  • 【融职培训】Web前端学习 第9章 教务管理系统开发6 后台代码讲解

    在项目中,前台获取数据时,需要前台提供token信息,后台验证才可以获取数据,验证代码如下。

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

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

    学习猿地
  • 利用canvas的fillText属性绘制文字并实现居中和清空画布

    其实上半部分是绘制圆环,最后 8 行才是文字部分,可以设置字体样式、颜色、是否居中等。

    德顺
  • canvas 绘制双线技巧

    最近一个项目,需要绘制双线的效果,双线效果表示的是轨道(类似铁轨之类的),如下图所示:

    用户3158888
  • Canvas画图基础

    画矩形 Canvas画矩形还是比较方便的,可以用fillrect,clearrect,strokerect,rect几种方法,各自间有点区别,先上代码: // ...

    Bob.Chen
  • vue 人脸识别 demo

    看到很多网上 vue 实现人脸识别的 demo ,很多都是不成形的源码。没办法,工作需要,自己借鉴别人的写了一个demo。( 可以满足所有的需求 )

    小蔚
  • Netty学习笔记(一)

    Netty是一种可以轻松快速的开发类似协议服务器和客户端网络应用程序的NIO客户端服务器框架,它大大简化了TCP或者UDP服务器的网络编程,但是你仍然可以访问和...

    加多
  • 挑苹果中的行为参数化思想

    草捏对Lambda表达式的了解停留在用IDEA自动替换匿名类的程度,以为Lambda表达式只是把代码缩短了而已,不过就是一个语法糖。所以一直不屑一顾,没系统学习...

    草捏子

扫码关注云+社区

领取腾讯云代金券