基于本地的Express用户验证登陆（Nodejs）

基于本地的Express用户验证登陆（Nodejs）

这次用express写了一个用户登陆验证，同时加载了bootstrap的布局加自己的一点点修改，简单的界面效果https://github.com/J-Chung/GProject/tree/master

2 回复

基于本地的Express用户验证登陆（Nodejs）

在这次的实现中，我们将使用Express框架来构建一个简单的用户登录验证系统。我们将结合Express、Passport.js以及一些基本的前端技术（如Bootstrap）来完成这个任务。整个项目的结构可以在以下GitHub链接中查看：GProject。

技术栈

  • Node.js：后端运行环境。
  • Express：用于构建Web应用的框架。
  • Passport.js：用于处理身份验证的中间件。
  • Bootstrap：前端框架，用于快速构建美观的用户界面。

步骤

  1. 初始化项目 首先，创建一个新的Node.js项目，并安装必要的依赖项：

    mkdir express-auth
cd express-auth
npm init -y
npm install express passport passport-local bcryptjs body-parser express-session ejs bootstrap

  2. 配置Express 创建app.js文件，并进行基本的Express配置：

    const express = require('express');
const session = require('express-session');
const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;
const bcrypt = require('bcryptjs');

const app = express();

// 设置视图引擎为EJS
app.set('view engine', 'ejs');

// 使用body-parser中间件解析请求体
app.use(express.urlencoded({ extended: false }));

// 使用session中间件
app.use(session({
  secret: 'secret',
  resave: false,
  saveUninitialized: false
}));

// 初始化passport
app.use(passport.initialize());
app.use(passport.session());

// 定义本地策略
passport.use(new LocalStrategy(
  function(username, password, done) {
    // 这里应该从数据库查询用户信息
    const user = { id: 1, username: 'admin', password: '$2a$10$KZuXm8z7bYRJUj5oNqTQZuZlM9LWnD8sZtL5kFz5vH.' }; // 加密后的密码
    bcrypt.compare(password, user.password, function(err, res) {
      if (res) {
        return done(null, user);
      } else {
        return done(null, false, { message: 'Invalid credentials' });
      }
    });
  }
));

// 序列化与反序列化用户
passport.serializeUser(function(user, done) {
  done(null, user.id);
});

passport.deserializeUser(function(id, done) {
  // 这里应该从数据库获取用户信息
  const user = { id: 1, username: 'admin' };
  done(null, user);
});

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

// 登录表单路由
app.get('/login', (req, res) => {
  res.render('login');
});

// 主页路由
app.get('/', (req, res) => {
  res.send(`Welcome ${req.user ? req.user.username : 'Guest'}`);
});

app.listen(3000, () => console.log('Server running on port 3000'));

  3. 创建视图 在views目录下创建login.ejs文件：

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <h2>Login</h2>
    <form action="/login" method="post">
      <div class="form-group">
        <label for="username">Username</label>
        <input type="text" class="form-control" id="username" name="username">
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" class="form-control" id="password" name="password">
      </div>
      <button type="submit" class="btn btn-primary">Login</button>
    </form>
  </div>
</body>
</html>

通过以上步骤，我们就可以实现一个基于本地的用户登录验证系统。你可以根据需要进一步扩展功能，例如添加注册功能或使用数据库存储用户信息。


针对“基于本地的Express用户验证登录（Node.js）”这个问题，我将提供一个基本的实现思路和示例代码。该方案将包括后端的设置、路由处理、以及用户认证逻辑。

示例代码

首先，你需要安装必要的依赖包：

npm install express body-parser express-session

接下来是app.js文件的代码：

const express = require('express');
const bodyParser = require('body-parser');
const session = require('express-session');

const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(session({
    secret: 'your_secret_key',
    resave: false,
    saveUninitialized: true
}));

// 假设有一个用户数据库
let users = [
    { username: 'admin', password: 'password123' }
];

app.get('/', (req, res) => {
    res.send(`
        <form action="/login" method="post">
            <input type="text" name="username" placeholder="Username" required><br>
            <input type="password" name="password" placeholder="Password" required><br>
            <button type="submit">Login</button>
        </form>
    `);
});

app.post('/login', (req, res) => {
    let user = users.find(u => u.username === req.body.username && u.password === req.body.password);

    if (user) {
        req.session.user = user;
        res.redirect('/dashboard');
    } else {
        res.send('Invalid credentials');
    }
});

app.get('/dashboard', (req, res) => {
    if (req.session.user) {
        res.send(`Welcome, ${req.session.user.username}!`);
    } else {
        res.redirect('/');
    }
});

app.listen(3000, () => console.log('Server running on port 3000'));

解释

  1. 依赖安装：我们使用express, body-parser来处理HTTP请求，express-session来进行会话管理。
  2. 路由配置：
    • / 是登录表单页面。
    • /login 是处理登录请求的POST路由。
    • /dashboard 是登录成功后的欢迎页面。
  3. 会话管理：通过express-session，我们能够存储用户会话信息，从而跟踪登录状态。
  4. 用户验证：当用户提交表单时，我们将检查users数组中是否存在匹配的用户名和密码。

以上就是基于本地的Express用户验证登录的一个简单实现。实际应用中可能需要更复杂的逻辑和数据库支持。

回到顶部