保护SPA(单页应用)的最佳实践之一是使用JSON Web Token(JWT)进行安全控制。JWT是一种用于在网络应用间传递声明的安全传输方式,它可以验证和加密数据。
以下是一个使用JWT进行安全控制的代码示例:
npm install jsonwebtoken
const jwt = require('jsonwebtoken');
// 创建一个JWT并返回给客户端
app.post('/api/login', (req, res) => {
// 从请求中获取用户名和密码
const { username, password } = req.body;
// 检查用户名和密码是否有效
if (isValidCredentials(username, password)) {
// 创建一个JWT的payload(负载),可以包含用户ID、用户名等信息
const payload = { username: username, role: 'admin' };
// 签署JWT并设置过期时间
const token = jwt.sign(payload, 'secret_key', { expiresIn: '1h' });
// 将JWT发送给客户端
res.json({ token });
} else {
res.status(401).json({ error: 'Invalid credentials' });
}
});
import jwt_decode from 'jwt-decode';
// 检查用户是否已经登录
function isAuthenticated() {
const token = localStorage.getItem('token');
// 验证JWT是否存在并且有效
if (token) {
try {
const decodedToken = jwt_decode(token);
const currentTime = Date.now() / 1000;
// 检查JWT是否过期
if (decodedToken.exp < currentTime) {
return false;
}
return true;
} catch (error) {
return false;
}
}
return false;
}
// 发送请求时将JWT添加到请求头中
function sendAuthenticatedRequest(url, method, data) {
const token = localStorage.getItem('token');
// 添加JWT到请求头中
const headers = {
Authorization: `Bearer ${token}`,
'Content-Type': 'application/json',
};
return fetch(url, { method, headers, body: JSON.stringify(data) });
}
以上代码示例演示了如何在后端服务器生成JWT,并在前端SPA中使用JWT进行安全控制。后端服务器在用户成功登录后生成JWT,并将其发送给前端SPA。前端SPA可以保存JWT到本地存储中,并在每次发送请求时将JWT添加到请求头中。后端服务器可以验证JWT的有效性,并根据JWT中的声明授权或拒绝请求。
需要注意的是,JWT需要在后端服务器上进行签署和验证,以确保安全性。同时,为了防止JWT被篡改,可以使用密钥(secret_key)对JWT进行签署和验证。在实际应用中,密钥需要保密,并且可以存储在环境变量中。