XM的小窝


 

前后端身份认证—使用express-session

前后端的身份认证

HTTP是一个无状态的协议,想要记住那个请求分别是哪个用户发起的,是很难进行判断的,所以,浏览器为我们提供了一个叫cookie的东西,用来区分每个请求的身份

Cookie 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时,在连接关闭(浏览器进程)后,服务端不会记录用户的信息。

Cookie 的作用就是用于解决 "如何记录客户端的用户信息":

  • 当用户访问 web 页面时,他的名字可以记录在 cookie 中。
  • 在用户下一次访问该页面时,可以在 cookie 中读取用户访问记录。

Cookie 以名/值对形式存储

在Express中使用Session认证

配置 express session中间件与SQL模块

expres-session中间件安装成功后,需要通过 app.use() 来注册session中间件

//导入express
const express = require('express');
const path = require('path');
const app = express();
//导入 session 中间件
const session = require('express-session');

//导入mysql模块
const mysql = require('mysql');
//建立于MySQL的数据库连接
const db = mysql.createPool({
    host: '127.0.0.1',
    port: 3306,
    user: 'root',
    password: 'xxxxxx',
    database: 'testsql'
});

//配饰Session 中间件
app.use(session({
    secret: 'fhdskjfhnkjgis', // secret 属性可以是任意的字符串
    resave: false, //固定值 
    saveUninitialized: true
}));

配置接口

//解析post提交过来的数据
app.use(express.urlencoded({ extended: false }));
app.use(express.static('./'));

//登录的API接口
app.post('/api/login', (req, res) => {
    const queryStr = "SELECT * FROM users WHERE username=? AND password=?";
    //查询表
    db.query(queryStr, [req.body.username, req.body.password], (err, results) => {
        if (err) {
            return console.log(err.message);
        }
        if (results.length < 1) {
            return res.send({ status: 1, msg: '登录失败,请检查用户名和密码' });
        } else {
            //执行的是select语句,则result结果是一个数组
            console.log(req.body.username, req.body.password);
            console.log(results);

            //将登录成功后的用户信息,保存到Session中
            //只有成功配置了express-session中间件之后才能使用session属性
            req.session.user = req.body; //用户的信息
            req.session.isLogin = true; //用户的登录状态

            res.send({ status: 0, msg: '登录成功' })
        }
    });
})

//获取用户姓名的接口
app.get('/api/username', (req, res) => {
    //判断用户是否登录
    if (!req.session.isLogin) {
        return res.send({ status: 1, msg: "未登录,请登录" });
    }
    res.send({ status: 0, msg: 'success', username: req.session.user.username });
})

绑定静态文件,侦听端口

//侦听端口
app.listen(88, () => {
    console.log("express is running on http://127.0.0.1:88");
})
app.use(express.static('./'));

清空session

调用 req.session.destroy() 函数,即可清空服务器当前用户保存的session信息

//退出登录接口
app.get("/api/logout", (req, res) => {
    req.session.destroy();
    res.send({ status: 0, msg: '退出登录成功!' });
})

前端HTML

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登了个录</title>
</head>

<body>
    <form action="/api/login" method="post">
        <p>用户名:<input type="text" name="username" id="username"></p>
        <p>密码:<input type="password" name="password" id="password"></p>
        <p><input type="submit" value="登录"></p>
    </form>
    <a href="./api/username">查看登录结果</a>
    <a href="./api/logout">退出登录</a>
</body>

</html>
点赞
  1. 淄博测漏说道:
    Sogou Explorer Windows 10

    感谢分享 赞一个

    1. kanokano说道:
      Google Chrome Windows 10

      谢谢~

  2. 嫣折羽说道:
    Google Chrome Windows 10

    好耶~ :鹿乃_打call:

  3. kanokano说道:
    Google Chrome Windows 10

    :鹿乃_吃瓜:

  4. heartalborda说道:
    Google Chrome Windows 10

    前几天刚好在整这个(虽然说只有验证码是用的express-session中间件,账号是jwt

    1. kanokano说道:
      Google Chrome Windows 10

      很巧呀

        1. kanokano说道:
          Google Chrome Windows 10

          话说大佬代码好整齐呀,还有问问大佬,那个pub文件是模板引擎之类的东西吗 :鹿乃_???:

        2. heartalborda说道:
          Google Chrome Windows 10

          对,pug文件是模板引擎的模板和需要渲染的页面文件

发表评论

电子邮件地址不会被公开。必填项已用 * 标注