インターネットの継続的な発展に伴い、ユーザーのログインはインターネット サービスの重要な機能になりました。ログイン リクエストの処理も、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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
