Nodejs가 로그인 요청을 처리합니다.-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

Nodejs가 로그인 요청을 처리합니다.

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 13, 2023 pm 08:25 PM

인터넷의 지속적인 발전과 함께 사용자 로그인은 인터넷 서비스의 필수적인 기능이 되었습니다. 로그인 요청을 처리하는 것도 Node.js에서 매우 일반적인 작업입니다. 이 글에서는 Node.js를 사용하여 사용자 로그인 요청을 처리하는 방법을 설명하겠습니다.

1단계: 환경 설정

로그인 요청 처리를 시작하기 전에 Node.js, Express 프레임워크 및 관련 종속 라이브러리 설치를 포함하여 환경을 설정해야 합니다. 여기서는 Express 프레임워크를 예로 들어 설명하겠습니다.

설치하려면 명령줄에 다음 명령을 입력하세요.

npm install express --save
npm install body-parser --save
npm install express-session --save

로그인 후 복사

여기에서 사용하는 종속 라이브러리는 다음과 같습니다.

Express: 간단한 웹 애플리케이션 프레임워크를 제공합니다.
body-parser: HTTP 요청을 구문 분석하는 데 사용됩니다.
express-session: 간단하고 사용하기 쉬운 세션 관리 기능을 제공합니다.

2단계: 프런트 엔드 인터페이스 구현

로그인 요청을 처리하기 전에 간단한 프런트 엔드 인터페이스를 구현해야 합니다. 여기서는 이를 달성하기 위해 HTML과 JavaScript를 사용합니다.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>登录</title>
  </head>
  <body>
    <form action="/login" method="post">
      <label>用户名：</label>
      <input type="text" name="username"><br>
      <label>密码：</label>
      <input type="password" name="password"><br>
      <button type="submit">登录</button>
    </form>
  </body>
</html>

로그인 후 복사

JavaScript:

window.onload = function () {
  var form = document.querySelector('form');
  form.addEventListener('submit', function (e) {
    e.preventDefault(); // 阻止表单默认提交
    var username = document.querySelector('input[name="username"]').value;
    var password = document.querySelector('input[name="password"]').value;
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/login');
    xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
    xhr.onload = function () {
      var data = JSON.parse(xhr.responseText);
      alert(data.message);
    };
    xhr.send(JSON.stringify({ username: username, password: password }));
  });
};

로그인 후 복사

여기에서는 간단한 로그인 양식을 구현하고 XMLHttpRequest 개체를 통해 양식 데이터를 서버 측으로 보냅니다. 데이터를 보낼 때 요청 헤더의 Content-Type을 application/json 형식으로 설정한다는 점에 유의하세요. Content-Type为application/json格式。

第三步：处理登录请求

现在我们已经实现了一个简单的前端界面，接下来我们需要在服务器端接收并处理登录请求。

app.js：

var express = require('express');
var bodyParser = require('body-parser');
var session = require('express-session');

var app = express();

app.use(bodyParser.json());
app.use(session({
  secret: 'your secret',
  resave: false,
  saveUninitialized: true
}));

// 处理登录请求
app.post('/login', function (req, res) {
  var username = req.body.username;
  var password = req.body.password;
  if (username === 'admin' && password === '123456') {
    req.session.username = username; // 将用户名存储到session中
    res.send({ success: true, message: '登录成功！' });
  } else {
    res.send({ success: false, message: '用户名或密码不正确！' });
  }
});

app.listen(3000, function () {
  console.log('Server running on http://localhost:3000');
});

로그인 후 복사

这里我们使用Express框架提供的app.post方法来处理POST请求，如果用户名和密码都正确，我们将用户名存储到session中，并返回一个响应，否则返回另外一个响应。

需要注意的是，在处理请求之前，我们使用了body-parser中间件来解析HTTP请求体中的JSON格式数据，并使用了express-session中间件来提供会话管理功能。

第四步：处理登录状态

现在，我们已经可以处理用户登录请求，但是还需要处理登录状态。在前端界面中，我们可以通过发送GET请求获取当前用户的登录状态。

HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>检查登录状态</title>
  </head>
  <body>
    <button id="checkLogin">检查登录状态</button>
    <script>
      document.getElementById('checkLogin').addEventListener('click', function () {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '/checkLogin');
        xhr.onload = function () {
          var data = JSON.parse(xhr.responseText);
          alert(data.message);
        };
        xhr.send();
      });
    </script>
  </body>
</html>

로그인 후 복사

JavaScript：

window.onload = function () {
  var btn = document.getElementById('checkLogin');
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/checkLogin');
  xhr.onload = function () {
    var data = JSON.parse(xhr.responseText);
    if (data.success) {
      btn.innerHTML = '您已登录，点击注销';
    } else {
      btn.innerHTML = '您未登录，点击登录';
    }
  };
  xhr.send();
};

로그인 후 복사

这里我们实现了一个检查登录状态的功能，通过发送GET请求到服务器端来判断当前用户是否已经登录。如果已经登录，我们将按钮的文本改为“点击注销”，否则改为“点击登录”。

app.js：

// 检查登录状态
app.get('/checkLogin', function (req, res) {
  var username = req.session.username;
  if (username) {
    res.send({ success: true, message: '您已经登录了！' });
  } else {
    res.send({ success: false, message: '您还没有登录！' });
  }
});

로그인 후 복사

这里我们使用app.get方法来处理GET请求，如果当前用户已经登录，我们返回一个响应，否则返回另外一个响应。

第五步：处理注销请求

最后，我们还需要处理用户的注销请求。在前端界面中，用户点击注销按钮时，我们需要发送一个logout请求到服务器端。

HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>注销</title>
  </head>
  <body>
    <button id="logout">注销</button>
    <script>
      document.getElementById('logout').addEventListener('click', function () {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '/logout');
        xhr.onload = function () {
          var data = JSON.parse(xhr.responseText);
          alert(data.message);
        };
        xhr.send();
      });
    </script>
  </body>
</html>

로그인 후 복사

JavaScript：

window.onload = function () {
  var btn = document.getElementById('logout');
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/checkLogin');
  xhr.onload = function () {
    var data = JSON.parse(xhr.responseText);
    if (data.success) {
      btn.style.display = 'block';
      btn.innerHTML = '注销';
    } else {
      btn.style.display = 'none';
    }
  };
  xhr.send();
  btn.addEventListener('click', function () {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/logout');
    xhr.onload = function () {
      var data = JSON.parse(xhr.responseText);
      if (data.success) {
        btn.style.display = 'none';
        alert(data.message);
      }
    };
    xhr.send();
  });
};

로그인 후 복사

这里我们实现了一个注销功能，通过发送GET请求到服务器端来注销当前用户。需要注意的是，在点击注销按钮时，我们需要先检查当前用户是否已经登录。

app.js：

// 处理注销请求
app.get('/logout', function (req, res) {
  req.session.destroy(function () {
    res.send({ success: true, message: '您已经成功注销了！' });
  });
});

로그인 후 복사

这里我们使用req.session.destroy

3단계: 로그인 요청 처리

간단한 프런트 엔드 인터페이스를 구현했으므로 이제 서버 측에서 로그인 요청을 수신하고 처리해야 합니다.

app.js: 🎜rrreee🎜여기에서는 Express 프레임워크에서 제공하는 app.post 메서드를 사용하여 POST 요청을 처리합니다. 사용자 이름과 비밀번호가 올바른 경우 사용자 이름을 세션에 저장합니다. 응답을 반환하고, 그렇지 않으면 다른 응답이 반환됩니다. 🎜🎜요청을 처리하기 전에 body-parser 미들웨어를 사용하여 HTTP 요청 본문의 JSON 형식 데이터를 구문 분석하고 express-session을 사용했다는 점에 유의해야 합니다. >세션 관리 기능을 제공하는 미들웨어입니다. 🎜🎜4단계: 로그인 상태 처리🎜🎜이제 사용자 로그인 요청을 처리할 수 있지만 여전히 로그인 상태를 처리해야 합니다. 프런트 엔드 인터페이스에서는 GET 요청을 보내 현재 사용자의 로그인 상태를 얻을 수 있습니다. 🎜🎜HTML: 🎜rrreee🎜JavaScript: 🎜rrreee🎜여기서 현재 사용자가 로그인했는지 확인하기 위해 서버에 GET 요청을 보내 로그인 상태를 확인하는 기능을 구현합니다. 이미 로그인되어 있으면 버튼 텍스트를 "로그아웃하려면 클릭하세요"로 변경하고, 그렇지 않으면 "로그인하려면 클릭하세요"로 변경합니다. 🎜🎜app.js: 🎜rrreee🎜여기에서는 app.get 메서드를 사용하여 GET 요청을 처리합니다. 현재 사용자가 로그인되어 있으면 응답을 반환하고, 그렇지 않으면 다른 응답을 반환합니다. 🎜🎜5단계: 로그아웃 요청 처리🎜🎜마지막으로 사용자의 로그아웃 요청도 처리해야 합니다. 프런트엔드 인터페이스에서 사용자가 로그아웃 버튼을 클릭하면 서버에 로그아웃 요청을 보내야 합니다. 🎜🎜HTML:🎜rrreee🎜JavaScript:🎜rrreee🎜여기서 서버에 GET 요청을 보내 현재 사용자를 로그아웃하는 로그아웃 기능을 구현합니다. 로그아웃 버튼을 클릭할 때 먼저 현재 사용자가 로그인되어 있는지 확인해야 한다는 점에 유의하세요. 🎜🎜app.js: 🎜rrreee🎜여기서는 로그아웃 기능을 구현하기 위해 req.session.destroy 메소드를 사용하여 현재 세션을 파괴합니다. 🎜🎜요약: 🎜🎜이 글에서는 Node.js와 Express 프레임워크를 사용하여 사용자 로그인 요청을 처리하는 방법을 소개합니다. 간단한 프런트엔드 인터페이스를 구현함으로써 우리는 XMLHttpRequest 객체를 사용하여 POST 및 GET 요청을 보내는 방법을 마스터하여 프런트엔드 대화형 기능을 실현했습니다. 서버 측에서 로그인 및 로그아웃 기능을 구현함으로써 Express 프레임워크에서 제공하는 미들웨어를 사용하여 HTTP 요청 및 세션 관리 기능을 처리하는 방법을 배웠습니다. 이 글에서 소개한 내용을 마스터하고 나면 이미 사용자 로그인 요청을 쉽게 처리할 수 있을 것이라고 믿습니다. 🎜

위 내용은 Nodejs가 로그인 요청을 처리합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.