NodeJS -- 简单的实现一个登录功能

最新推荐文章于 2026-04-28 09:50:37 发布

原创最新推荐文章于 2026-04-28 09:50:37 发布 · 1.3w 阅读

60 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#NodeJS -- 简单的实现一个登录功能

JavaScript 专栏收录该内容

68 篇文章

订阅专栏

本文档展示了如何使用NodeJS、Express和MongoDB实现登录功能。当用户尝试访问个人页面时，如果没有登录，则会被重定向到登录页面。登录过程中，如果账号密码匹配，设置cookie并跳转到个人页面；否则，跳转到错误页面。注册成功后，用户信息将存储在数据库中，同时设置cookie。代码涵盖了路由、中间件、模板引擎和数据库操作等方面的知识。

实现目标：默认起始页面时登录页面，输入账号密码，如果没有此账号那么跳到注册页面，注册成功后进入个人页面。登录时，如果账号密码不匹配，那么跳到错误页面，三秒后跳到登录页面。

我们还需要保证如果用户没有登录，那么就不能进入个人页面（通过url)。简单使用express mongoDB.

实现效果图：

此时数据库里面没有任何数据，那么就不会匹配成功，会跳转到注册页面。

点击注册，那么会跳转到个人页面。

个人页面 welcome 用户

在数据库里面多了一个用户admin

浏览器cookie里面设置了username

假设我们将cookie删除，那么我们进入main.html(个人页面）会发什么。没错就会跳到登录页面。

我想你大概知道怎么做了吧。

登录时，我们用前端返回的username,password去数据库里面查询，如果匹配成功那么就设置cookie的username，然后跳到个人页面，如果没有此账号那么就跳到注册页面，如果匹配失败，那么就会跳到失败页面

注册时，注册成功后，我们就设置cookie 然后跳到个人页面（注意我们这里没有对账号的唯一性进行检测）

看一下demo的结构

model的index,js放的是mongoDB用的模型，views放的是一些模板html(使用express的模板引擎处理） index.js是入口

先看index.js


const express = require("express");
const path = require("path");
const bodyParser = require("body-parser");
const getModel = require("./model");
const crypto = require("crypto");
const cookieParser = require("cookie-parser");
const app = express();

app.set("views", path.join(__dirname, "views"));
app.set("view engine", "html");
app.engine("html", require("ejs").__express); 

app.use(bodyParser.urlencoded({ extended: true })); //用于解析post参数
app.use(cookieParser()); 

const User = getModel("User"); //获取模型


function isLogin(req, res, next) { //一个中间件 检测cookie上面使用username属性 如果有 那么证明登录成功过 否正跳到登录页面
    const { username } = req.cookies; 
    if (username) { //如果存在
        next();
    } else {
        res.redirect("/login");
    }
}

app.get("/login", function (req, res) { //登录
    res.render("login");
})
app.post("/login", function (req, res) {
    let { username, password } = req.body;
    password = crypto.createHmac("md5", "cyl").update(password).digest("hex"); //加盐然后加密 （准确应该是摘要）
    User.findOne({ username}, function (err, doc) {
        if (err) { //对错误处理
        }
        if (doc) { //查询数据库发现存在 那么就到个人页面
            if (doc.password === password) { //如果密码也匹配
                res.cookie("username", username);
                res.redirect("/main");
                res.end();
            } else {
                
                res.render("error");
            }
        } else {
            res.redirect("/register"); //如果不存在 那么就到注册页面
        }
    })
    
})

app.get("/register", function (req, res) {
    res.render("register");
})
app.post("/register", function (req, res) {
    let { username, password } = req.body;
    password = crypto.createHmac("md5", "cyl").update(password).digest("hex");
    User.create({ username, password }, function (err, doc) {
        if (err) {//对错误处理
        }
        //目前对账号的唯一性不做要求
        if (doc) { //注册成功
            res.cookie("username", username);
            res.redirect("/main");
            res.end();
        }
    })

})

app.get("/main", isLogin, function (req, res) { //通过isLogin中间件来判断是否登录过
    const { username } = req.cookies;
    res.render("main", { username })
})

app.get("/", isLogin, function (req, res) {
    res.redirect("login")
})
app.listen(8080, () => {
    console.log("http://localhost:8080已经打开")
});

最前面是引入一些模块，然后就是express的模板引擎设置，然后引入处理post请求参数的中间和cookie的中间件，然后是获取数据库的模型

isLogin中间间件是我们用来判断是否登录的（在get("/main") get("/")使用然后下面就是路由了

几个简单的html

error.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>错误页面</title>
</head>
<body>
    <p>对不起，用户名或者密码输入错误! 三秒后页面跳转到登录页面</p>
</body>
<script>
    window.onload = () => {
        setTimeout(()=> {
            window.location.href = "http://localhost:8080";
        }, 3000)
    }
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录页面</title>
</head>
<body>
    <h1>登录页面</h1>
    <form method="POST" action="/login">
        <label for="name">用户名：</label><input id="name" type="text" name="username" />
        <label for="pw">密码：</label><input id="pw" type="password" name="password" />
        <input type="submit" value="登录"/>
    </form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册页面</title>
</head>
<body>
    <h1>注册页面</h1>
    <form method="POST"  action="/register">
        <label for="name">用户名：</label><input id="name" type="text" name="username" />
        <label for="pw">密码：</label><input id="pw" type="password" name="password" />
        <input type="submit" value="注册"/>
    </form>
</body>
</html>

main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人页面</title>
</head>
<body>
    <h1>Welcome <%= username %></h1>
</body>
</html>

然后看一下mode/index.js



const mongoose = require("mongoose");
const conn = mongoose.createConnection("mongodb://localhost/test"); //连接数据库

const UserSchema = new mongoose.Schema({ //设置Schema
    username: { //用户名
        type: String,
        required: true
    },
    password: { //密码
        type: String,
        required: true
    },
    rTime: { //注册时间
        type: Number,
        default: Date.now()
    }
})

const User = conn.model("User", UserSchema);

const model = { User };
module.exports = function (modelName) {
    return model[modelName];
}

注意我返回的是一个函数通过给modelName 来获取响应的model

看懂代码需要了解express的基础使用路由中间件模板引擎等 mongoose的使用 cookie等