【Node.js】Cookie与Session模拟登录

最新推荐文章于 2024-01-22 14:13:28 发布

夹心776655

最新推荐文章于 2024-01-22 14:13:28 发布

阅读量513

点赞数

分类专栏： ES6&Node 文章标签： javascript es6 node.js

本文链接：https://blog.csdn.net/qq_37086980/article/details/112370620

版权

ES6&Node 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

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模拟登录

<!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模拟登录(包括验证码和小图标)

<!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...`)
})

夹心776655

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Node.js】Cookie与Session模拟登录

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:
复制链接

扫一扫