一、cookie与session概述
在说cookie与session的概念之前,我们讨论一个问题,那就是如何保持用户的登录状态。
在之前的课程中,客户端向服务器发送的每一次请求都是独立的,但是当我们访问一些电商网站的时候,可能会发现,当我登录之后,再访问自己的购物车时,确实可以找到自己所添加的商品,也就是说网站保持了我们的登录状态。
二、cookie
概述
网站服务器程序可以在浏览器中写入cookie,然后浏览器再次访问这个网站时,就会带着这个cookie。
实例代码如下所示
1router.get("/", async ctx => {2ctx.cookies.set("username","xiaoming");3ctx.body = "hello cookie";4})
可以在chrome调试工具中的network选项卡查看cookie内容
写入cookie之后,这个浏览器再次访问这个网站的任何一个页面,都会带着这个cookie。
通过maxAge可以设置cookie过期的毫秒数,实例代码如下所示
1ctx.cookies.set("username","xiaoming",{2maxAge:5000//过期时间设置为五秒3})
可以通过下面的方法获取cookie。
1router.get("/images", async ctx => {2let usr = ctx.cookies.get("username");3ctx.body = usr;4})
记录网页访问次数
利用cookie,可以记录客户端访问浏览器的次数,实例代码如下所示:
1router.get("/count", async ctx => { 2let count = ctx.cookies.get("count"); 3if(count > 0){ 4count = ++count; 5ctx.cookies.set("count",count,{ 6maxAge:2000 7 }); 8}else{ 9count = 1;10ctx.cookies.set("count",1);11 }12ctx.body = count13})
三、session
概述
利用cookie在客户端存储数据是完全透明的,如果存储一些用户信息,会导致很严重的安全问题,所以为了记录用户的登录状态,需要使用cookie与session结合的方式。
cnpm install --save koa-session
例如给session设置一个count属性,可以直接通过赋值的方式
ctx.session.count = 0;
获取也可以使用相同的方法
let count = ctx.session.count
记录网页访问次数
1const session = require("koa-session"); 2//加密的密钥,服务器通过加密的cookie获取session 3app.keys = ['secret']; 4app.use(session({ 5maxAge:2000, 6},app)) 7 8router.get("/session", async ctx => { 9if(ctx.session.count>0){10ctx.session.count = ++ctx.session.count;11}else{12ctx.session.count = 113 }14ctx.body = ctx.session.count15})
四、登录验证
首页:任何人都可以访问
登录页:提供表单,用户可以通过表单输入登录信息。
视频页:登录成功后可查看,并提供注销功能。
1//处理表单 2router.post("/login", async ctx => { 3let username = ctx.request.body.username; 4let password = ctx.request.body.password; 5if(username == "admin" && password == "123456"){ 6ctx.session.username = username 7ctx.redirect("/video") 8}else{ 9ctx.redirect("/")10 }11})1213//视频页14router.get("/video", async ctx => {15 console.log(ctx.session.username)16if(ctx.session.username){17await ctx.render("c",{username:ctx.session.username})18}else{19ctx.redirect("/")20 }21})22//表单页面23router.get("/login", async ctx => {24await ctx.render("index")25})26//注销27router.get("/logout", async ctx => {28ctx.session.username = ""29ctx.redirect("/")30})
五、课后练习
在上一节的课后练习基础上,实现融职教育的登录功能,要求如下
点击登录按钮,跳转至表单页面,输入用户名和密码后即实现登录效果。
登陆后,任何一个页面都可以显示用户名。