前端身份认证主要分为两种,一种是Session身份认证,一种是JWT身份认证。
服务端渲染推荐使用session认证机制
前后端分离推荐使用JWT认证机制
本博客讲述session身份认证机制,在了解session身份认证机制之前,需要先了解以下内容
(1)HTTP无状态性
(2)Cookie
Cookie在身份认证中的作用
Cookie不具有安全性
提高身份认证的安全性
(3)Session身份认证的工作原理(重要!!!)
(4)在Express中使用session认证
完整案例如下
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>