Cookie管理
- Cookie需要后端设置, 保存到后端浏览器里(相对不安全, 尽量不要存放敏感数据)
- 根据浏览器的不同cookie的大小非常小
- cookie的声明周期: 如果后端不设置过期时间, 关掉浏览器cookie就会被销毁
- 当服务器设置cookie后, 只要cookie没有销毁, 在以后的请求中, cookie会以请求头的方式传递到后端
- 可以实现登录状态存储, 浏览器之间不能实现cookie共享
- localStorage本地存储: 存储在浏览器端, 2M的大小, 只要不删除,永远存在。本地存储不会主动发送到服务器
Cookie基本用法
const express = require('express');
let app = express()
const cookieParser = require("cookie-parser")
app.use(cookieParser())
// 设置 res.cookie(k,v,过期时间)
// 过期时间过期时间有两种{maxAge:时间段} {expires:时间点}
// 获取
let date = new Date("2021-1-8 9:54:00")
app.get("/", (req, res) => {
console.log(req.cookies);
// res.cookie("name","zs",{maxAge:1000*10})
// res.cookie("name","zs",{expires:date})
res.end("ok")
})
app.listen(3000, () => {
console.log("3000ok");
})
Cookie模拟登录
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
</head>
<body>
<form action="/login" method="post">
账号:<input type="text" placeholder="请输入账号" name="username"><br>
密码:<input type="password" placeholder="请输入密码" name="password"><br>
<input type="submit">
</form>
</body>
</html>
login_cookie.js
const express = require('express');
const path = require('path');
let app = express()
const cookieParse = require('cookie-parser');
// 利用中间件
app.use(cookieParse())
app.use(express.urlencoded({ extended: true }))
// 存储username和password
app.get("/", (req, res) => {
if (req.cookies.username && req.cookies.password) {
res.send("Login successfully, this is index page");
} else {
res.send("You have not logged in, go to <a href = '/login'>login</a>");
}
})
// 跳转login页面
app.get("/login", (req, res) => {
let filepath = path.join(__dirname, "./login.html");
res.sendFile(filepath)
})
// form submit
app.post("/login", (req, res) => {
if (req.body.username && req.body.password) {
res.cookie("username", req.body.username)
res.cookie("password", req.body.password)
res.send("login successfully, go to <a href = '/'>index</a>")
} else {
res.send('Please confirm you have entered username and password, go to <a href = "/login">login</a>')
}
})
app.listen(3000, ()=>{
console.log(`Port 3000 is listening...`)
})
Session管理
- Cookie和session都属于http协议范畴, 只要开发web都可以使用cookie和session
- Cookie和session都能做同样的事情, 但是session更安全, 因为session存放在服务器
- Session依赖于cookie机制(服务器根据session存放在cookie的标识, 去确定这个session是哪个session)
- Session的生命周期: 如果后端不设置过期时间, 关掉浏览器session就会被销毁
Session基本用法
const express = require('express');
let app = express()
const session = require("express-session")
// let date=new Date("2021-1-8 11:19:00")
app.use(session({
secret: "This is a secret",
name: "abc",
cookie: {
// expires:date
maxAge: 1000 * 10// 过期时间
}
}))
app.get("/", (req, res) => {
// req.session.name="ls" //设置
console.log(req.session.name);// 获取
res.send("ok")
})
app.listen(3000, () => {
console.log("Port 3000 is listening...");
})
Session模拟登录(包括验证码和小图标)
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<style>
form input{
outline: none;
}
form input:nth-of-type(3){
width: 60px;
display: inline-block;
}
form img{
display: inline-block;
width: 100px;
}
</style>
</head>
<body>
<form action="/login" method="post">
账号:<input type="text" placeholder="请输入账号" name="username" autocomplete="off"><br>
密码:<input type="password" placeholder="请输入密码" name="password" autocomplete="off"><br>
验证码:<input type="text" name = "entercode" autocomplete="off"> <img src="http://localhost:3003/verification" alt="verification" id = "verification"><br>
<input type="submit">
</form>
</body>
</html>
<script>
verification.onclick = function(){
// 让img里的路径重新请求一次,就可以换一张图
// 不换请求的pathname,但是仍然可以是不同的url
verification.src = "http://localhost:3003/verification?" + Math.random();
}
</script>
login_session.js
const express = require('express');
const path = require('path');
// verification
const svgCaptcha = require('svg-captcha');
// favicon
const favicon = require('serve-favicon');
let app = express()
const session = require('express-session');
// 利用中间件
app.use(favicon(path.join(__dirname, "./favicon.ico")));
app.use(session({
resave:false,
saveUninitialized: true,
secret: "This is a session id",
cookie:{
// 过期时间
maxAge: 1000 * 60
}
}))
app.use(express.urlencoded({ extended: true }))
// 存储username和password
app.get("/", (req, res) => {
if (req.session.username && req.session.password) {
res.send("Login successfully, this is index page");
} else {
res.send("You have not logged in, go to <a href = '/login'>login</a>");
}
})
// 跳转login页面
app.get("/login", (req, res) => {
// console.log(path.join(__dirname, "./favicon.ico"));
let filepath = path.join(__dirname, "./login.html");
res.sendFile(filepath)
})
// form submit
app.post("/login", (req, res) => {
if (req.body.username && req.body.password) {
req.session.username = req.body.username;
req.session.password = req.body.password;
// console.log(req.session.username, req.session.password)
res.send("login successfully, go to <a href = '/'>index</a>")
} else {
res.send('Please confirm you have entered username and password, go to <a href = "/login">login</a>')
}
})
// verification
app.get("/verification", (req, res) =>{
let svgico = svgCaptcha.create({
size:4,
ignoreChars:'0o1I1',
noise:2,
color:true,
background:"#eee"
})
// 单独设置文件类型
res.type("svg");
res.send(svgico.data);
})
app.listen(3003, ()=>{
console.log(`Port 3003 is listening...`)
})