使用 Express.js 和 Passport.js 实现系统认证-JavaScript中文网-JavaScript教程资源分享门户

在 Web 开发中，系统认证是非常常见的一个功能。使用 Express.js 和 Passport.js 可以轻松地实现系统认证功能。本文将详细介绍使用 Express.js 和 Passport.js 实现系统认证的步骤。

什么是 Express.js 和 Passport.js？

Express.js 是一个基于 Node.js 平台的 Web 应用开发框架，它提供了一系列的 API，可以用来处理 HTTP 请求和响应。Express.js 的设计目标是帮助开发者快速构建 Web 应用。

Passport.js 是一个 Node.js 的身份验证中间件，可以用来实现不同类型的身份验证，例如本地认证、OAuth 认证和 OpenID 认证等。

步骤一：安装 Express.js 和 Passport.js

首先需要安装 Express.js 和 Passport.js。可以使用 npm 命令进行安装。

npm install express passport passport-local --save

步骤二：创建 Express.js 应用

创建一个名为 app.js 的文件，并输入以下代码：

// javascriptcn.com 代码示例
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('Example app listening on port 3000!');
});

这段代码创建了一个 Express.js 应用，并监听 3000 端口。当用户访问根路由时，应用将返回 "Hello World!"。

步骤三：添加 Passport.js 认证

接下来，需要添加 Passport.js 认证功能。首先需要引入 Passport.js 并配置本地认证策略。在 app.js 文件中添加以下代码：

// javascriptcn.com 代码示例
const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;

passport.use(new LocalStrategy(
  (username, password, done) => {
    // 在此处验证用户名和密码是否正确
    if (username === 'admin' && password === 'admin') {
      return done(null, { username: 'admin' });
    } else {
      return done(null, false);
    }
  }
));

这段代码创建了一个本地认证策略，并使用 passport.use() 方法注册到 Passport.js 中。在本地认证策略中，我们需要验证用户名和密码是否正确。如果验证成功，将返回 done(null, user)，其中 user 是一个 JavaScript 对象，包含了用户的信息。

接下来，需要添加 Passport.js 相关的中间件。在 app.js 文件中添加以下代码：

app.use(express.urlencoded({ extended: true }));
app.use(passport.initialize());
app.use(passport.session());

这段代码添加了三个中间件：express.urlencoded()、passport.initialize() 和 passport.session()。

express.urlencoded() 中间件用来处理 POST 请求中的表单数据。

passport.initialize() 中间件用来初始化 Passport.js。

passport.session() 中间件用来持久化用户的登录状态，也就是说，用户登录后，即使关闭浏览器，再次打开时仍然处于登录状态。

现在，我们需要添加两个路由，一个用来显示登录页面，一个用来接收登录表单的 POST 请求。在 app.js 文件中添加以下代码：

// javascriptcn.com 代码示例
app.get('/login', (req, res) => {
  res.send(`
    <form action="/login" method="post">
      <div>
        <label>Username:</label>
        <input type="text" name="username"/>
      </div>
      <div>
        <label>Password:</label>
        <input type="password" name="password"/>
      </div>
      <div>
        <input type="submit" value="Log In"/>
      </div>
    </form>
  `);
});

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

这段代码创建了两个路由，一个用来显示登录页面，一个用来接收登录表单的 POST 请求。

在 POST 请求中，使用 passport.authenticate() 方法来验证用户名和密码。如果验证成功，将重定向到根路由 /；如果验证失败，将重定向到登录页面 /login。

步骤四：添加登录验证中间件

现在，我们需要添加一个登录验证中间件，用来判断用户是否已经登录。在 app.js 文件中添加以下代码：

// javascriptcn.com 代码示例
const isAuthenticated = (req, res, next) => {
  if (req.isAuthenticated()) {
    return next();
  } else {
    res.redirect('/login');
  }
};

app.get('/profile', isAuthenticated, (req, res) => {
  res.send(`Welcome, ${req.user.username}`);
});

这段代码创建了一个名为 isAuthenticated 的中间件，用来判断用户是否已经登录。如果已经登录，将调用 next() 方法；如果未登录，将重定向到登录页面 /login。

接下来，我们创建了一个路由，用来显示用户的个人资料。在这个路由中，使用 isAuthenticated 中间件来验证用户是否已经登录。如果已经登录，将显示用户的欢迎信息；如果未登录，将重定向到登录页面 /login。

步骤五：运行应用并测试

现在，我们已经完成了整个系统认证的实现。使用以下命令来启动应用：

node app.js

在浏览器中访问 http://localhost:3000/，将会显示 "Hello World!"。

在浏览器中访问 http://localhost:3000/login，将会显示登录页面。

在登录页面中输入用户名和密码，将会重定向到根路由 /。

在浏览器中访问 http://localhost:3000/profile，将会显示用户的欢迎信息。

总结

本文介绍了使用 Express.js 和 Passport.js 实现系统认证的步骤。首先需要安装 Express.js 和 Passport.js，然后创建一个 Express.js 应用，并添加 Passport.js 认证功能。接着，需要添加两个路由，一个用来显示登录页面，一个用来接收登录表单的 POST 请求。最后，需要添加一个登录验证中间件，用来判断用户是否已经登录。最终，我们完成了整个系统认证的实现。

这个例子只是一个简单的示例，实际应用中可能需要更复杂的认证策略，例如使用数据库来存储用户信息。但是，本文介绍的步骤可以作为一个参考，帮助开发者快速实现系统认证功能。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65560486d2f5e1655d07a22b