④ https://chat.openai.com/share/1fde2f6b-0b35-4c7e-ad4c-ae1ac376288a
Chat GPTの回答
クライアント側とサーバ側のコードを正しく修正するために、以下の点を行います。
クライアント側コードの修正点:
1．onclick属性で直接logout.phpに遷移するのではなく、JavaScriptを使用してログアウト処理をAPIにリクエストするように変更します。
2．ボタンクリック時に非同期リクエストを行い、成功した場合にはログインページにリダイレクトするようにします。
サーバ側コードの修正点:
1．サーバ側でログアウト処理を行うエンドポイントを追加します。
2．GETリクエストを受けた時にセッションを破棄し、クライアントに成功の応答を返すようにします。
完全な修正済みコード:
クライアント側 (HTML + JavaScript):
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Dashboard</title>
<style>
body, header, .logout-button, footer, .content {
/* CSS省略 */
}
</style>
<script>
function logout() {
fetch('/logout', { method: 'GET' })
.then(response => response.json())
.then(data => {
if (data.success) {
window.location.href = '/login';
} else {
alert('ログアウトに失敗しました。');
}
})
.catch(error => {
console.error('Error:', error);
alert('ログアウト処理中にエラーが発生しました。');
});
}
</script>
</head>
<body>
<header>
<h1>Dashboard</h1>
<button class="logout-button" onclick="logout()">ログアウト</button>
</header>
<p class="content">Welcome to your Dashboard!</p>
<footer>
<p>© 2024 Company, Inc.</p>
</footer>
</body>
</html>
サーバ側 (Node.js + Express):
const express = require('express');
const session = require('express-session');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const bcrypt = require('bcrypt');
require('dotenv').config();
const app = express();
const port = 3000;
const pool = mysql.createPool({
// データベース設定省略
});
app.use(session({
secret: 'your_secret_key',
resave: false,
saveUninitialized: true
}));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(express.static('public'));
// ルーティング設定省略
// ログアウト処理
app.get('/logout', (req, res) => {
req.session.destroy(err => {
if (err) {
console.log(err);
res.status(500).json({ success: false });
} else {
res.json({ success: true });
}
});
});
app.listen(port, () => {
console.log(`サーバーがポート ${port} で稼働しています`);
});
これでクライアント側からログアウトボタンを押すと、サーバ側でセッションが破棄され、クライアントはログインページにリダイレクトされます。