在线排课系统与登录功能的实现

小明：最近我听说学校要开发一个在线排课系统，你觉得这个项目有什么挑战吗？

小李：确实有不少挑战。特别是登录功能，必须确保安全性和用户体验。

小明：那登录功能是怎么实现的呢？

小李：登录功能是系统的核心部分之一。通常我们会使用前后端分离的架构，前端负责用户界面，后端处理逻辑和数据。

小明：那前端怎么处理用户的输入呢？

小李：前端会用HTML和CSS来构建登录页面，然后用JavaScript进行表单验证，比如检查用户名和密码是否为空。

小明：那如果用户输入正确，怎么跟后端通信呢？

小李：这时候就会用到AJAX或者Fetch API，把用户输入的数据发送到后端接口，通常是RESTful API。

小明：那后端怎么处理这些请求呢？

小李：后端可以用Node.js、Python Flask或Java Spring Boot等框架来搭建服务。收到请求后，需要先验证用户信息是否正确。

小明：验证用户信息具体怎么做呢？

小李：一般会从数据库中查询用户是否存在，同时验证密码是否匹配。为了安全，密码不会以明文存储，而是使用哈希算法加密。

小明：那哈希算法是什么？

小李：哈希算法是一种将任意长度的数据转换为固定长度字符串的算法，比如SHA-256。即使密码相同，每次哈希的结果也不同，因为加入了盐值（salt）。

小明：那登录成功后，怎么保持用户的登录状态呢？

小李：通常会使用JWT（JSON Web Token）。当用户登录成功后，后端生成一个JWT，并返回给前端。前端在后续请求中携带该token，后端验证其有效性即可。

小明：那JWT是怎么工作的？

小李：JWT是一个自包含的令牌，里面包含了用户的信息和签名。后端在生成时会对内容进行签名，防止被篡改。前端在每次请求时都会带上这个token，后端验证签名后就可以确认用户身份。

小明：那前端怎么保存这个token呢？

小李：可以使用localStorage或者sessionStorage。localStorage是持久化的，而sessionStorage只在当前会话中有效。

小明：那如果用户不小心关闭了浏览器，会不会丢失登录状态？

小李：如果使用localStorage，即使关闭浏览器也不会丢失；但如果使用sessionStorage，则会丢失。所以一般建议使用localStorage来保存token。

小明：那有没有可能被别人盗取token呢？

小李：确实存在风险。为了防止token被盗用，我们可以设置token的有效期，比如1小时后过期。另外，还可以使用HTTPS来加密传输，避免中间人攻击。

小明：那在排课系统中，登录功能还有哪些需要注意的地方？

小李：除了基本的安全性外，还要考虑多角色登录。比如管理员、教师、学生可能有不同的权限，登录后需要跳转到不同的页面。

小明：那如何区分用户角色呢？

小李：可以在JWT中加入用户角色字段，比如“role”：“admin”或“teacher”。后端在验证token时，根据角色决定用户能访问哪些资源。

小明：那前端怎么根据角色显示不同的内容呢？

小李：前端可以通过解析JWT中的角色信息，动态渲染页面内容。比如，管理员可以看到管理后台，而普通用户只能看到自己的课程安排。

小明：听起来挺复杂的，但很有必要。

小李：是的，尤其是在在线排课系统这种对安全性要求较高的系统中，登录功能的设计至关重要。

小明：那你能给我看一段代码示例吗？

小李：当然可以。我们来看一下前端登录页面的代码。


<!-- login.html -->
<form id="loginForm">
<input type="text" id="username" placeholder="用户名" required>
<input type="password" id="password" placeholder="密码" required>
<button type="submit">登录</button>
</form>
<script>
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password })
}).then(response => response.json())
.then(data => {
if (data.token) {
localStorage.setItem('token', data.token);
alert('登录成功！');
window.location.href = '/dashboard';
} else {
alert('登录失败，请重试。');
}
});
});
</script>

小明：这段代码是前端的登录逻辑，看起来很清晰。

小李：没错。接下来我们看看后端的登录处理代码。


// server.js (Node.js + Express)
const express = require('express');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcrypt');
const app = express();
app.use(express.json());
// 假设有一个用户数据库
const users = [
{ id: 1, username: 'admin', password: '$2b$10$3vRZ7nJ4tXyKcU9W8jVYB.OFhEwQrDqzPmOxuHgG9TqWdAqL5k', role: 'admin' }
];
app.post('/api/login', (req, res) => {
const { username, password } = req.body;

const user = users.find(u => u.username === username);
if (!user) {
return res.status(401).json({ error: '用户不存在' });
}
bcrypt.compare(password, user.password, (err, isMatch) => {
if (err) throw err;
if (!isMatch) {
return res.status(401).json({ error: '密码错误' });
}
const payload = { id: user.id, username: user.username, role: user.role };
const token = jwt.sign(payload, 'secret_key', { expiresIn: '1h' });
res.json({ token });

});
});
app.listen(3000, () => console.log('服务器运行在 http://localhost:3000'));