个人网站制作 Part 11 添加用户权限管理 | Web开发项目

---

👩‍💻 基础Web开发练手项目系列：个人网站制作

欢迎回到基础Web开发练手项目系列！

在前几篇博文中，我们已经创建了个人网站的基本结构、样式、导航栏、项目展示、联系信息、表单交互、动画效果、页面滚动效果、响应式设计、性能优化、页面动画、用户认证、数据库集成、电子邮件通知、社交媒体集成、博客功能和用户评论功能。

在本篇中，我们将学习如何添加用户权限管理，使你的网站更加安全。

🚀 添加用户权限管理

🔨使用Passport.js

🔧步骤 1: 修改Passport本地策略

在 server.js 文件中修改Passport本地策略，添加用户权限字段：

passport.use(new LocalStrategy(async (username, password, done) => {try {// 在数据库中查找用户const user = await User.findOne({ username });// 检查密码是否匹配if (!user || user.password !== password) {return done(null, false, { message: '用户名或密码错误' });}return done(null, user);} catch (error) {return done(error);}}
));

🔨修改用户模型

🔧步骤 2: 修改用户模型

在 server.js 文件中修改用户模型，添加权限字段：

const userSchema = new mongoose.Schema({username: String,password: String,role: { type: String, default: 'user' } // 默认角色为普通用户
});const User = mongoose.model('User', userSchema);

🔨创建管理员账户

🔧步骤 3: 创建管理员账户

在 server.js 文件中添加创建管理员账户的路由：

// 创建管理员账户
app.post('/create-admin', async (req, res) => {const { username, password } = req.body;try {// 检查是否已存在管理员账户const adminExists = await User.findOne({ role: 'admin' });if (adminExists) {return res.status(403).json({ message: '管理员账户已存在' });}// 创建管理员账户const admin = new User({ username, password, role: 'admin' });const savedAdmin = await admin.save();res.json(savedAdmin);} catch (error) {res.status(500).json({ message: error.message });}
});

🚀 预览与保存

确保保存所有文件并在浏览器中预览你的网站。你现在应该看到一个拥有用户权限管理功能的更加安全的个人网站了！

🚀 下一步计划

在下一篇文章中，我们将学习如何添加文件上传功能，使你的网站支持多媒体内容。记得继续关注本系列，为你的网站增添更多强大的功能！

通过这个项目，你已经学到了Web开发中许多重要的基础知识，并通过添加用户权限管理功能使你的网站更加安全可靠。祝你编码愉快，不断提升技能！