网站怎么识别“你”是“你”
事实上,客户端向服务器发送的每一次请求都是独立的。而这,与我们的日常认知是不符的,服务器如何识别已经登录的用户,如何维持用户的登录状态
cookie和session可以做到。
1.cookie
设置cookie
//设置cookie
router.get('/',async (ctx)=>{
//cookie是以明值对的方式记录在客户端(浏览器)的
ctx.cookies.set("username","void");
ctx.body = "cookie and session"
})
设置后,F12打开network,该浏览器再访问这个网站均会携带该cookie
获取cookie
//获取cookie
router.get('/getcookie',async ctx=>{
let user = ctx.cookies.get("username");
ctx.body = user;
});
设置cookie有效时间
router.get('/',async (ctx)=>{
ctx.cookies.set("username","void",{
maxAge:2000 //过期时间设置为两秒
});
ctx.body = "cookie and session"
})
cookie应用实例——记录网页访问次数
//cookie 实例 记录网页访问次数
router.get('/count',async ctx=>{
let count = ctx.cookies.get("count");
if(count>0){
count++;
ctx.cookies.set("count",count,{
maxAge:5*1000
});
}else{
count = 1;
ctx.cookies.set("count",count);
}
ctx.body = count;
});
2.session
- session 在服务器端,cookie 在客户端(浏览器)
- session 默认被存在在服务器的一个文件里(不是内存)
- session 的运行依赖 session id,而 session id 是存在 cookie 中的,也就是说,如果浏览器禁用了 cookie ,同时 session 也会失效(但是可以通过其它方式实现,比如在 url 中传递 session_id)
- session 可以放在 文件、数据库、或内存中都可以。
- 用户验证这种场合一般会用 session
- 维持一个会话的核心就是session id(客户端的唯一标识)
安装koa-session
cnpm install --save koa-session
配置session
const Koa = require('koa');
const session = require("koa-session");
const app = new Koa();
//配置session
/*
session(arg1,arg2);
arg1:配置项
arg2:app
*/
app.keys = ["123456"];//配置密钥
app.use(session({
maxAge:3*1000
},app))
设置session
直接给session设置属性
//设置session
router.get('/setSession',async ctx=>{
ctx.session.user = "void";//设置user属性(自定义什么名字都可以)
ctx.body = "set session";
})
获取session
//获取session
router.get("/getsession",async ctx =>{
let user = ctx.session.user;
console.log(user);
ctx.body = user;
})
session应用实例——记录网页访问次数
//利用session记录网页访问次数
router.get("/count2",async ctx=>{
let count = ctx.session.count;
if(count>0){
count++;
ctx.session.count = count;
}else{
ctx.session.count = 1;
}
ctx.body = count;
})
3.登录验证
- 首页:任何人均能访问
- 登录界面:表单界面,用户通过表单登录
- 内容页:仅登录的用户可以访问,且可以注销
首页
//home界面
router.get('/',async (ctx)=>{
/*先获取session.userName
判断是否登录
是则提示欢迎 某用户
否则提示请登录
*/
let user = ctx.session.userName;
if(user){
await ctx.render("index",{
user:user,
page:"one"
});
}else{
await ctx.render("index",{
user:"请登录",
page:"one"
});
}
});
登录界面
//登录表单界面
router.get('/login',async ctx=>{
//判断是否已经登录
/*
是:提示已经登录
否:设置session
*/
let user = ctx.session.userName;
if(user){
await ctx.render("login.html",{
user:"您已经登录",
page:"three"
})
}else{
await ctx.render("login.html",{
user:"请输入登录信息",
page:"three"
})
}
})
处理表单
//处理表单提交
router.post('/login',async ctx=>{
//获取数据
let userName = ctx.request.body.username;
let passWord = ctx.request.body.password;
//模拟数据库中存在用户:void 密码:123456
if(userName === "void" && passWord==="123456"){
// 设置session
ctx.session.userName = userName;
//重定向
ctx.redirect('/content')
}else{
ctx.redirect('/')
}
})
content界面
//content界面
router.get('/content',async ctx=>{
//判断是否登录
let user = ctx.session.userName;
if(user){
await ctx.render("content",{
user:user,
page:"two"
})
}else{
await ctx.redirect('/')
}
})
注销
//注销界面
router.get('/logout',ctx=>{
//判断是否登录
let user = ctx.session.userName
if(user){
ctx.session.userName="";
ctx.redirect('/')
}else{
ctx.redirect('/')
}
})
完整项目包
密码:441v