nodejs学习笔记(14)-Cookie与Session身份验证(2) - 在node中session中间件的使用

`Session`中间件的使用

安装express-session中间件

npm install express-session --save

随后在项目当中引入中间件

const session = require("express-session")

注册和配置session中间件

app.use(session({
    secret: 'server-session',    // 服务器生成session的签名 自定义
    name: 'sessionToCookieName', // 设置session对应cookie的名称
    resave: false,               // 强制保存session，即使他没有变化，必须配置，否则会有警告
    saveUninitialized: true,     // 强制将未初始化的session存储，必须配置，否则会有警告
    rolling: true,               // 在每次请求时强行设置cookie，这将重置cookie过期时间（默认：false）
    cookie: {                    // cookie 配置与cookie-parser的配置一致
        maxAge: 1000 * 60,
        secure: false,
    },
}))

session中间件的增删改查

增 , 改 , 查

// 新增和编辑
app.get('/login', (req, res) => {
    req.session.username = '张三'//直接在后面追加属性或者修改属性值
    res.send('登录')
})

// 查询
app.get('/', (req, res) => {
    var username = req.session.username
    if(!username) {
        res.send('session没有缓存用户姓名的信息')
    } else {
        res.send('用户姓名为：' + username)
    }
})

删

方法一: 设置cookie的maxAge为0

// 它会把所有的session都销毁 一般不用
app.get('/loginout', (req, res) => {
    req.session.cookie.maxAge = 0
})

方法二: 销毁指定session

// 指定session中具体的key值进行销毁
app.get('/loginout', (req, res) => {
    req.session.username = null
})

方法三: 调用destroy方法

// 会清空所有的session
req.session.destroy((err) => {
    if(err) {
        console.log(err)
        return
    }
    res.send('退出登录, session清空成功')
})

我做了一个小`demo`来实现`Session`的增删改查实现

实现需求:一个登陆界面,一个首页,登录成功后将登陆状态和用户名密码等信息保存到session中并跳转到首页
在首页中输出session中的用户名
点击首页的退出登录按钮,清除session中的数据并跳转回登录页,此时无法在通过修改网页url的方法回到首页

代码实现:

服务器端(app.js)

// cookie与session - session中间件的使用

// 引入 express框架 和 session中间件
const express = require('express')
const session = require('express-session')

// 创建服务器
const app = express()

// 使用express托管静态资源(./托管的话,一运行服务器就会默认指向该目录下的index文件)
app.use(express.static('./pages'))//直接配置同目录下的文件名即可

// 配置解析post参数的两个内置中间件
// 通过express.json()这个中间件，解析表单中的JSON格式的数据
app.use(express.json())//解析post的请求题参数(json格式)
// 通过express.urlencoded()这个中间件，来解析表单中的url-encoded格式的数据
app.use(express.urlencoded({extended:false}))//解析post的请求题参数(encoded格式)

// 学习重点1: 配置 Session 中间件(里面传入一个配置对象)
app.use(session({
    secret: 'jiami',//里面传入任意的字符串,用于session加密
    resave: false,//固定写法,用于强制保存 session 默认为true,建议设置为false
    saveUninitialized: true//固定写法,强制将未初始化的 session 存储。默认为true
}))

// 登录的 API 接口
app.post('/login', (req, res) => {
    console.log(req.body);
    // 判断用户提交的登录信息是否正确
    if (req.body.username !== 'lam' || req.body.password !== '123') {
      return res.send({ status: 0, msg: '登录失败' })
    }
  
    // 学习重点2: 请将登录成功后的用户信息，保存到 Session 中
    // 注意：只有成功配置了 express-session 这个中间件之后，才能够通过 req 点出来 session 这个属性
    req.session.user = req.body // 用户的信息
    req.session.islogin = true // 用户的登录状态
  
    res.send({ status: 1, msg: '登录成功' })
})

// 获取用户姓名接口(获取session里面的数据)
app.get('/username',(req,res)=>{
    // 首先对请求参数中的session进行判断,判断其中是否存在islogin
    if(!req.session.islogin){
        return res.send({status:0,msg:'登陆失败!'})
    }
    res.send({
        status:1,
        msg:'登陆成功!',
        username: req.session.user.username,//学习重点3: 获取session里面的数据
    })
})

// 退出登录接口(清除session)
app.get('/logout',(req,res)=>{
    // 学习重点4: 调用session.destroy()接口清空session
    // 注意调用.destroy只会清除当前用户的session,不会清除其他用户的session
    req.session.destroy()
    res.send({
        status:0,
        msg:'退出登陆成功!!'
    })
})

// 启动服务器
app.listen(3000,()=>{
    console.log('服务器已启动,3000端口正在监听...');
})

登录页(login.html)[这里就只显示body标签内的数据]

<body>
    <div>
        账号:<input type="text" placeholder="请输入账号" id="username"><br>
        密码:<input type="password" placeholder="请输入密码" id="password">
    </div><br>
    <button id="login">登录</button>

    <script>
        // 获取输出的参数
        var username = document.querySelector('#username')//获取输入账号dom
        var password = document.querySelector('#password')//获取输入密码dom
        var login = document.querySelector('#login')//获取登录按钮dom

        // 注册登陆事件(点击发送post请求)
        login.onclick = ()=>{
            console.log(username.value,password.value)
            // 使用fetch发送请求
            fetch(`/login`,{
                method:"POST",
                body:JSON.stringify({//设置响应体内容
                    username:username.value,
                    password:password.value
                }),
                headers:{//设置响应头
                    "Content-Type":"application/json"
                }
            }).then(res=>res.json()).then(res=>{
                // console.log(res)
                // 判断返回的状体码status
                if(!res.status){
                    alert('登陆失败!账号或者密码错误!!')
                }else{
                    alert('登陆成功!')
                    location.href = './index.html'
                }
            })
        }
    </script>
</body>

首页(index.html)[这里就只显示body标签内的数据]

<body>
    <h1>首页</h1>
    <button id="logout">退出登录</button>

    <script>
        // 页面一加载就发送请求判断session的登陆情况
        fetch(`/username`,{
                method:"get",//发送get请求
            }).then(res=>res.json()).then(res=>{
                console.log(res)
                // 首先判断登陆状态
                if(!res.status){
                    alert(`你暂未登录,请先登录...`)
                    location.href = './login.html'
                }else{
                    alert(`欢迎!${res.username}`)
                }
            })

        // // 注册退出登录事件
        var logout = document.querySelector('#logout')

        // // 点击发送退出登录请求
        logout.onclick = ()=>{
            fetch(`/logout`,{
                method:"get",//发送get请求
            }).then(res=>res.json()).then(res=>{
                console.log(res)
                alert(res.msg)//输出退出成功!
                location.href = './login.html'//退回登录面
            })
        }
    </script>
</body>