フロントエンド ID 認証は主に 2 種類に分けられ、1 つはセッション ID 認証、もう 1 つは JWT ID 認証です。
サーバー側のレンダリングにはセッション認証メカニズムを使用することをお勧めします。
フロントエンドとバックエンドを分離するには、JWT 認証メカニズムを使用することをお勧めします。
このブログでは、セッション認証のメカニズムについて説明します。セッション認証のメカニズムを理解する前に、次のことを理解する必要があります。
(1) HTTPステートレス
（2）クッキー
ID 認証における Cookie の役割
Cookieは安全ではありません
本人認証のセキュリティを向上させる
(3) セッション認証の動作原理 (重要!!!) 
(4) Expressでセッション認証を使用する
完全なケースは次のとおりです
app.js コード:
// 导入express包
const express = require('express');
// 创建web服务器
const app = express();
// 托管静态资源
app.use(express.static('./pages'))
// 导入session包
const session = require('express-session');
// 解析 POST 提交过来的表单数据
app.use(express.urlencoded({ extended: false }))
// 配置session中间件
app.use(session({
secret: 'sy',
resave: false,
saveUninitialized: true
}))
// 将登录成功的用户信息保存在session中
app.post('/login', (req, res) => {
console.log(req.body);
if (req.body.username !== 'sy' || req.body.password !== '123456') {
return res.send({ status: 1, msg: '登录失败' });
}
// 将登录成功的用户信息保存到session中
req.session.user = req.body;
// 将用户状态保存到session中
req.session.islogin = true;
res.send({ status: 0, msg: '登录成功！' });
})
// 获取用户姓名的接口
app.get('/username', (req, res) => {
if (!req.session.islogin) {
return res.send({ status: 1, msg: 'fail' });
}
res.send({ status: 0, msg: 'success', username: req.session.user.username });
})
// 退出登录的接口
app.post('/logout', (req, res) => {
// 清空session信息 注意：只会清空当前用户的session不会清空其他用户的
req.session.destroy();
res.send({ status: 0, msg: '退出登录成功' });
})
app.listen(80, () => {
console.log('hahaha');
})Index.html コード:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后台主页</title>
<script src="./jquery.js"></script>
</head>
<body>
<h1>首页</h1>
<button id="btnLogout">退出登录</button>
<script>
$(function() {
// 页面加载完成后，自动发起请求，获取用户姓名
$.get('/username', function(res) {
// status 为 0 表示获取用户名称成功；否则表示获取用户名称失败！
if (res.status !== 0) {
alert('您尚未登录，请登录后再执行此操作！')
location.href = './login.html'
} else {
alert('欢迎您：' + res.username)
}
})
// 点击按钮退出登录
$('#btnLogout').on('click', function() {
// 发起 POST 请求，退出登录
$.post('/logout', function(res) {
if (res.status === 0) {
// 如果 status 为 0，则表示退出成功，重新跳转到登录页面
location.href = './login.html'
}
})
})
})
</script>
</body>
</html>login.html コード:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录页面</title>
<script src="./jquery.js"></script>
</head>
<body>
<!-- 登录表单 -->
<form id="form1">
<div>账号：<input type="text" name="username" autocomplete="off" /></div>
<div>密码：<input type="password" name="password" /></div>
<button>登录</button>
</form>
<script>
$(function() {
// 监听表单的提交事件
$('#form1').on('submit', function(e) {
// 阻止默认提交行为
e.preventDefault()
// 发起 POST 登录请求
$.post('/login', $(this).serialize(), function(res) {
// status 为 0 表示登录成功；否则表示登录失败！
if (res.status === 0) {
location.href = './index.html'
} else {
alert('登录失败！')
}
})
})
})
</script>
</body>
</html>