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: シンプルな Web アプリケーションプログラムフレームワークを提供します。 ;
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 形式に設定することに注意してください。

ステップ 3: ログインリクエストを処理する

シンプルなフロントエンドインターフェイスを実装したので、サーバー側でログインリクエストを受信して処理する必要があります。

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 リクエストを処理します。ユーザー名とパスワードが正しい場合は、それをセッションに保存して応答を返します。そうでない場合は、別の応答を返します。

リクエストを処理する前に、body-parser ミドルウェアを使用して HTTP リクエスト本文内の JSON 形式のデータを解析し、express-session # を使用したことに注意してください。 ##セッション管理機能を提供するミドルウェア。

ステップ 4: ログインステータスを処理する

これで、ユーザーのログイン要求を処理できますが、ログインステータスを処理する必要があります。フロントエンドインターフェイスでは、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 リクエストを処理します。現在のユーザーがログインしている場合は、応答を返します。それ以外の場合は、別の 1 つの応答を返します。

ステップ 5: ログアウト要求を処理する

最後に、ユーザーのログアウト要求も処理する必要があります。フロントエンドインターフェイスでは、ユーザーがログアウトボタンをクリックしたときに、サーバーにログアウトリクエストを送信する必要があります。

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 メソッドを使用して現在のセッションを破棄し、ログアウト機能を実現します。

概要:

この記事では、Node.js と Express フレームワークを使用してユーザーのログイン要求を処理する方法を紹介します。シンプルなフロントエンドインターフェイスを実装することで、XMLHttpRequest オブジェクトを使用して POST および GET リクエストを送信する方法を習得し、フロントエンドの対話型機能を実現しました。サーバー側にログインおよびログアウト機能を実装することで、Express フレームワークが提供するミドルウェアを使用して HTTP リクエストとセッション管理機能を処理する方法を学びました。この記事で紹介した内容をマスターすれば、ユーザーのログイン要求を簡単に処理できるようになると思います。

以上がNodejs はログインリクエストを処理しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。