前后端session原理 cookie是什么 session中间件 node跨域

cookie

 

 

由name和value值组成

 

 

 

 cookie不具有安全性！！！不能用cookie存储用户的隐私敏感数据

 

 

安装session中间件

 

 

 

案例：

新建一个文件夹，输入

npm init -y
npm i express
npm i express-session

　　在目录下新建一个app.js文件

// 导入 express 模块
const express = require('express')
// 创建 express 的服务器实例
const app = express()
// TODO_01：请配置 Session 中间件
const session = require('express-session')
app.use(session({
    secret: 'sessiondemo',
    resave: false,
    saveUninitialized: true,
}))
// 托管静态页面
app.use(express.static('./pages'))
// 解析 POST 提交过来的表单数据
app.use(express.urlencoded({ extended: false }))
// 判断用户提交的登录信息是否正确
app.post('/api/login', (req, res) => {
    if (req.body.username !== 'admin' || req.body.password !== 'admin') {
        return res.send({ status: 1, msg: '登录失败' })
    }
    // TODO_02：请将登录成功后的用户信息，保存到 Session 中
    // 将登陆成功的信息保存到session
    // 注意：只有成功配置了express-session这个中间件后，才能req出来session这个属性
    req.session.user = req.body  //用户的信息
    req.session.islogin = true //用户的登录状态
    res.send({ status: 0, msg: '登录成功' })
})
// 获取用户姓名接口
app.get('/api/username', (req, res) => {
    // TODO_03：请从 Session 中获取用户的名称，响应给客户端
    if (!req.session.islogin) {
        return res.send({
            stutus: 1,
            msg: 'fail'
        })
    }
    res.send({
        status: 0,
        msg: 'success',
        username: req.session.user.username
    })
})
// 退出登录的接口
app.post('/api/logout', (req, res) => {
    // TODO_04：清空 Session 信息   destroy只会清空对于的用户登录状态和session
    req.session.destroy()
    res.send({
        status: 0, 
        msg: '退出登录成功',
    })
})
// 调用 app.listen 方法，指定端口号并启动web服务器
app.listen(8080, () => {
    console.log('express serve running at http://127.0.0.1')
})

在同目录下新建一个pages文件夹

引入一个jquery文件

新建一个index.html文件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./jquery.js"></script>
</head>

<body>
  <h1>首页</h1>

  <button id="btnLogout">退出登录</button>

  <script>
    $(function () {

      // 页面加载完成后，自动发起请求，获取用户姓名
      $.get('/api/username', function (res) {
        // status 为 0 表示获取用户名称成功；否则表示获取用户名称失败！
        if (res.status !== 0) {
          alert('您尚未登录，请登录后再执行此操作！')
          location.href = './login.html'
        } else {
          alert('欢迎您：' + res.username)
        }
      })

      // 点击按钮退出登录
      $('#btnLogout').on('click', function () {
        // 发起 POST 请求，退出登录
        $.post('/api/logout', function (res) {
          if (res.status === 0) {
            // 如果 status 为 0，则表示退出成功，重新跳转到登录页面
            location.href = './login.html'
          }
        })
      })
    })
  </script>
</body>

</html>

再新建一个login文件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./jquery.js"></script>
</head>

<body>
  <!-- 登录表单 -->
  <form id="form1">
    <div>账号：<input type="text" name="username" /></div>
    <div>密码：<input type="password" name="password" /></div>
    <button>登录</button> 
  </form>

  <script>
    $(function () {
      // 监听表单的提交事件
      $('#form1').on('submit', function (e) {
        // 阻止默认提交行为
        e.preventDefault()
        // 发起 POST 登录请求
        $.post('/api/login', $(this).serialize(), function (res) {
          // status 为 0 表示登录成功；否则表示登录失败！
          if (res.status === 0) {
            location.href = './index.html'
          } else {
            alert('登录失败！')
          }
        })
      })
    })
  </script>
</body>

</html>

　　紧接着node启动项目就好了

 

posted @ 2022-11-10 15:59  文采呱呱  阅读(22)  评论(0)  编辑  收藏  举报