nodejs实现登陆验证功能

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，许多 Web 项目都使用 Node.js 来实现后端服务。在 Web 开发中，登陆验证功能是非常常见的一个需求，本文将详细讲解如何使用 Node.js 实现登陆验证功能。

实现思路

登陆验证功能的实现一般分为以下几个步骤：

创建登录页面，用户输入账号密码提交登录请求。
服务器接收登录请求，验证账号密码是否正确，如果正确则生成令牌（token）并返回给客户端，否则返回登录失败信息。
客户端在接收到令牌后，将令牌存储在浏览器的 Cookie 或者 LocalStorage 中，用于以后的访问验证。
客户端之后的访问需要携带令牌信息，服务端验证令牌是否正确，如果正确则允许访问，否则返回禁止访问信息。

下面，我们将对上述步骤进行详细说明。

创建登录页面

我们可以使用 HTML 和 CSS 创建一个简单的登录页面，例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <form>
            <div>
                <label for="username">Username:</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div>
                <label for="password">Password:</label>
                <input type="password" id="password" name="password" required>
            </div>
            <input type="submit" value="Login">
        </form>
    </div>
</body>
</html>

我们将表单的提交方式设置为“post”，这样提交的数据不会被显示在 URL 中。点击“Login”按钮会向服务器发送登录请求。

服务器接收登录请求

在 Node.js 中，可以使用 Express 框架来快速搭建 Web 服务器。下面是一个基本的 Express 服务器示例代码：

const express = require('express');
const app = express();

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.post('/login', (req, res) => {
    const { username, password } = req.body;
    // TODO: 验证账号密码是否正确
    if (username === 'admin' && password === '123456') {
        const token = 'xxx'; // TODO: 生成令牌
        res.json({ code: 0, token });
    } else {
        res.json({ code: -1, message: '用户名或密码错误' });
    }
});

app.listen(3000, () => {
    console.log('Server is running on port 3000.');
});

我们创建了一个路由为“/login”的 post 请求，用于接收登录请求。在请求体中获取用户名和密码，然后进行验证。如果验证通过，生成一个令牌，返回给客户端。

客户端存储令牌

客户端在接收到令牌后，需要将令牌存储在浏览器的 Cookie 或者 LocalStorage 中，用于以后的访问验证。这里以 Cookie 为例，存储令牌的代码如下：

fetch('/login', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ username, password })
}).then(res => res.json())
  .then(res => {
      if (res.code === 0) {
          document.cookie = `token=${res.token}`;
      } else {
          alert(res.message);
      }
  });

这里使用 Fetch API 发送 POST 请求获取服务器返回结果，然后判断返回的状态码。如果状态码为 0，则说明登录成功，将令牌存储在 Cookie 中。Cookie 的值应该是一个字符串，包含键值对“token=xxx”的形式。

验证令牌

客户端之后的访问需要携带令牌信息，服务端验证令牌是否正确，如果正确则允许访问，否则返回禁止访问信息。下面是基本的服务器验证代码：

app.get('/api/data', (req, res) => {
    const { token } = req.cookies;
    if (!token) {
        res.status(403).json({ message: '无权访问' });
    } else {
        // TODO: 验证 token 是否正确
        if (token === 'xxx') {
            res.json({ message: '成功访问数据' });
        } else {
            res.status(403).json({ message: '无权访问' });
        }
    }
});

我们创建了一个路由为“/api/data”的 get 请求，用于获取数据。先从 Cookie 中获取令牌，如果令牌不存在，则返回“无权访问”信息，否则验证令牌是否正确。如果令牌正确，则返回数据信息，否则返回“无权访问”信息。

示例说明

下面是一个完整的示例，模拟了用户登录和获取数据的功能。输入用户名“admin”和密码“123456”即可登录成功，并获取数据。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <form>
            <div>
                <label for="username">Username:</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div>
                <label for="password">Password:</label>
                <input type="password" id="password" name="password" required>
            </div>
            <input type="submit" value="Login">
        </form>
        <button id="get-data">Get data from server</button>
    </div>
    <script>
        const loginForm = document.querySelector('form');
        const getDataBtn = document.querySelector('#get-data');
        const usernameInput = document.querySelector('#username');
        const passwordInput = document.querySelector('#password');

        loginForm.addEventListener('submit', event => {
            event.preventDefault();
            const username = usernameInput.value;
            const password = passwordInput.value;
            fetch('/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ username, password })
            }).then(res => res.json())
              .then(res => {
                  if (res.code === 0) {
                      document.cookie = `token=${res.token}`;
                      alert('Login success!');
                  } else {
                      alert(res.message);
                  }
              });
        });

        getDataBtn.addEventListener('click', () => {
            fetch('/api/data', {
                credentials: 'include'
            }).then(res => res.json())
              .then(res => {
                if (res.message) {
                    alert(res.message);
                } else {
                    alert('Data received!');
                }
              });
        });
    </script>
</body>
</html>

const express = require('express');
const cookieParser = require('cookie-parser');
const app = express();

app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());

app.post('/login', (req, res) => {
    const { username, password } = req.body;
    if (username === 'admin' && password === '123456') {
        const token = 'xxx';
        res.json({ code: 0, token });
    } else {
        res.json({ code: -1, message: '用户名或密码错误' });
    }
});

app.get('/api/data', (req, res) => {
    const { token } = req.cookies;
    if (!token) {
        res.status(403).json({ message: '无权访问' });
    } else {
        if (token === 'xxx') {
            res.json({ message: '成功访问数据' });
        } else {
            res.status(403).json({ message: '无权访问' });
        }
    }
});

app.listen(3000, () => {
    console.log('Server is running on port 3000.');
});

注意事项：

在客户端发送请求时需要添加“credentials: 'include'”选项，表示发送 Cookie。
在服务器端需要引入 cookie-parser 中间件解析 Cookie。
实际应用中需要根据具体的需求生成并验证令牌，避免出现安全漏洞。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：nodejs实现登陆验证功能 - Python技术站