在Web开发中，前后端的身份验证通常涉及到会话（Session）和JSON Web Tokens（JWT）。以下是一个简单的例子，展示了如何在前后端中使用这两种方法。
使用Session进行身份验证
后端（Node.js + Express）:
const express = require('express');
const session = require('express-session');
const app = express();
app.use(session({
secret: 'your-secret-key',
resave: false,
saveUninitialized: true,
cookie: { secure: true }
}));
app.post('/login', (req, res) => {
// 假设这里有用户验证逻辑
if (req.body.username === 'user' && req.body.password === 'pass') {
req.session.loggedIn = true; // 标记用户为已登录
res.redirect('/home');
} else {
res.send('登录失败');
}
});
app.get('/home', (req, res) => {
if (req.session.loggedIn) {
res.send('欢迎回家');
} else {
res.redirect('/login');
}
});
app.listen(3000);
前端（HTML + JavaScript）:
<form id="loginForm" action="/login" method="post">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<button type="submit">登录</button>
</form>
<script>
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表单默认提交行为
// 发送登录请求，例如使用 fetch API
fetch('/login', {
method: 'POST',
body: new FormData(this),
})
.then(response => response.text())
.then(data => {
if (data === '欢迎回家') {
// 登录成功，跳转到 homepage
location.href = '/home';
} else {
// 登录失败，处理错误
alert(data);
}
});
});
</script>
使用JWT进行身份验证
后端（Node.js + Express）:
const express = require('express');
const jwt = require('jsonwebtoken');
const app = express();
app.post('/login', (req, res) => {
// 假设这里有用户验证逻辑
if (req.body.username === 'user' && req.body.password === 'pass') {
const token = jwt.sign({ userId: 1 }, 'your-secret-key', { expiresIn: '1h' });
res.json({ token: token });
} else {
res.status(401).send('登录失败');
}
});
app.get('/home', (req, res) => {
const token = req.headers.authorization;