L'authentification d'identité frontale est principalement divisée en deux types, l'un est l'authentification d'identité de session et l'autre est l'authentification d'identité JWT.
Il est recommandé d'utiliser le mécanisme d'authentification de session pour le rendu côté serveur
Il est recommandé d'utiliser le mécanisme d'authentification JWT pour la séparation front-end et back-end
Ce blog décrit le mécanisme d'authentification de session. Avant de comprendre le mécanisme d'authentification de session, vous devez comprendre ce qui suit
(1) HTTP sans état
（2）Biscuit
Le rôle des cookies dans l'authentification de l'identité
Les cookies ne sont pas sécurisés
Améliorer la sécurité de l'authentification d'identité
(3) Principe de fonctionnement de l'authentification de session (important !!!) 
(4) Utiliser l'authentification de session dans Express
Le cas complet est le suivant
code 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');
})code 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>code 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>