前后端的身份认证:Session&JWT
在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;
评论已关闭