融合门户
小李：嗨，小王，最近我们团队正在开发一个融合服务门户，我负责前端部分。你能帮我设计一下登录模块吗？
小王：当然可以！首先，我们需要确保用户的登录信息是安全的。我们可以使用JWT（JSON Web Token）进行身份验证。
小李：听起来不错，那具体怎么操作呢？
小王：我们可以创建一个简单的后端API，用于处理登录请求。例如：
// 后端代码 (Node.js + Express)
const express = require('express');
const jwt = require('jsonwebtoken');
const app = express();
app.use(express.json());
const SECRET_KEY = 'your_secret_key';
app.post('/login', (req, res) => {
const { username, password } = req.body;
// 假设这是我们的用户数据库
const users = [
{ id: 1, username: 'admin', password: 'password123' }
];
const user = users.find(u => u.username === username && u.password === password);
if (user) {
const token = jwt.sign({ userId: user.id }, SECRET_KEY, { expiresIn: '1h' });
return res.json({ token });
} else {
return res.status(401).json({ message: 'Invalid credentials' });
}
});
app.listen(3000, () => console.log('Server running on port 3000'));
小李：这个API看起来很简洁。那么，前端部分该如何实现呢？
小王：我们可以使用Fetch API来发送登录请求到后端。如果成功，就可以存储令牌并在后续请求中使用它。
// 前端代码 (JavaScript)
async function login(username, password) {
try {
const response = await fetch('http://localhost:3000/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password })
});
if (response.ok) {
const data = await response.json();
localStorage.setItem('token', data.token);
alert('Login successful!');
} else {
alert('Invalid credentials.');
}
} catch (error) {
console.error(error);
}
}
小李：太棒了！接下来是如何实现方案下载功能。
小王：同样地，我们可以添加一个新的API端点来处理文件下载请求。例如：
app.get('/download/:id', (req, res) => {
const fileId = req.params.id;
const files = [
{ id: 1, name: 'solution.pdf', path: './files/solution.pdf' }
];
const file = files.find(f => f.id === parseInt(fileId));
if (file) {
res.download(file.path, file.name);
} else {
res.status(404).send('File not found');
}
});
小李：这很好理解。那么，前端如何触发这个下载呢？
小王：我们可以检查用户是否已登录，然后允许他们下载文件。以下是前端代码示例：
async function downloadFile(fileId) {
const token = localStorage.getItem('token');
if (!token) {
alert('Please log in first!');
return;
}
try {
const response = await fetch(`http://localhost:3000/download/${fileId}`, {
headers: { Authorization: `Bearer ${token}` }
});
if (response.ok) {
window.location.href = response.url;
} else {
alert('Failed to download file.');
}
} catch (error) {
console.error(error);
}
}
小李：非常感谢你的帮助！现在我可以开始整合这些功能了。
]]>
