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

谁践踏了优雅 2022-01-23 07:09 485阅读 0赞

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

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

实现效果图：

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 1][]点击注册，那么会跳转到个人页面。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 2][]个人页面 welcome  用户

在数据库里面多了一个用户admin![20190602235343695.png][]

浏览器cookie里面设置了username

![20190602235436607.png][]

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

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

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

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

看一下demo的结构

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

先看index.js

最前面是引入一些模块，然后就是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

然后看一下mode/index.js

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70]: /images/20220123/e1ec994f6c87453687b2e3daa6c68b5e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 1]: /images/20220123/f39e5278f504421b875824db0ed63fa2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 2]: /images/20220123/52d448569ac44dbcb7bba2a8972e249d.png
[20190602235343695.png]: /images/20220123/5a5aa706e1f64576bfbf1d97c7ce0509.png
[20190602235436607.png]: /images/20220123/b0317ef179b54f43be409c5ea8888de6.png
[2019060300021251.png]: /images/20220123/4cf7aafcca034988a8afaab21c137e04.png