个人网站制作 Part 7 添加用户认证和数据库集成

个人网站制作 Part 7 添加用户认证和数据库集成 | Web开发项目

文章目录

👩‍💻 基础Web开发练手项目系列：个人网站制作
- 🚀 用户认证与数据库集成
- - 🔨添加用户认证
  - - 🔧步骤 1: 使用Passport.js
  - 🔨集成数据库
  - - 🔧步骤 2: 使用MongoDB和Mongoose
- 🚀 预览与保存
- 🚀 下一步计划

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

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

在前几篇博文中，我们已经创建了个人网站的基本结构、样式、导航栏、项目展示、联系信息、表单交互、动画效果、页面滚动效果、响应式设计、性能优化和页面动画。

在本篇中，我们将学习如何添加用户认证和数据库集成，进一步提升网站的功能性。

在这里插入图片描述

🚀 用户认证与数据库集成

🔨添加用户认证

🔧步骤 1: 使用Passport.js

安装Passport.js和相关策略。

npm install passport passport-local express-session

在 server.js 文件中配置Passport.js。

const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;

// 添加Passport初始化和session支持
app.use(passport.initialize());
app.use(passport.session());

// 使用本地策略进行身份验证
passport.use(new LocalStrategy(
    (username, password, done) => {
        // 在这里进行用户身份验证逻辑
        // 示例：检查用户名和密码是否匹配数据库中的记录
        if (username === 'user' && password === 'password') {
            return done(null, { id: 1, username: 'user' });
        } else {
            return done(null, false, { message: '用户名或密码错误' });
        }
    }
));

// 将用户信息存储到session中
passport.serializeUser((user, done) => {
    done(null, user.id);
});

// 从session中恢复用户信息
passport.deserializeUser((id, done) => {
    // 示例：从数据库中获取用户信息
    const user = { id: 1, username: 'user' };
    done(null, user);
});

添加登录路由和身份验证中间件。

app.post('/login',
    passport.authenticate('local', {
        successRedirect: '/',
        failureRedirect: '/login',
        failureFlash: true
    })
);

app.get('/login', (req, res) => {
    res.send('登录页面');
});

app.get('/logout', (req, res) => {
    req.logout();
    res.redirect('/');
});

🔨集成数据库

🔧步骤 2: 使用MongoDB和Mongoose

安装Mongoose。

npm install mongoose

在 server.js 文件中配置Mongoose。

const mongoose = require('mongoose');

// 连接MongoDB数据库
mongoose.connect('mongodb://localhost:27017/mywebsite', {
    useNewUrlParser: true,
    useUnifiedTopology: true
});

// 定义用户模型
const userSchema = new mongoose.Schema({
    username: String,
    password: String
});

const User = mongoose.model('User', userSchema);

修改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);
        }
    }
));