使用 Express.js 和 Passport.js 构建用户登录系统

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

在现代 Web 应用中，用户登录系统是很常见的需求。通过使用 Express.js 和 Passport.js，我们可以轻松地构建一个安全可靠、易于扩展的用户登录系统。本文将介绍如何使用这两个工具来实现一个基本的用户登录系统，并对其中涉及的技术进行详细的介绍。

什么是 Express.js？

Express.js 是一个 Node.js 框架，用于构建 Web 应用程序和 API。它是 Node.js 生态系统中最流行的框架之一，因为它提供了一组灵活的工具和函数，使得开发人员可以快速地创建高效的 Web 应用程序。

什么是 Passport.js？

Passport.js 是一个 Node.js 的身份验证中间件。它专门用于处理用户身份验证问题，可以支持各种验证方式，例如本地验证、OAuth、OpenID 等等。Passport.js 的结构非常灵活，可以使用各种策略来实现身份验证，如使用用户名和密码、LDAP、Facebook、Google 等。

构建用户登录系统

我们将使用 Express.js 和 Passport.js 来构建一个基本的本地用户登录系统。在这个示例应用程序中，用户需要注册并登录，才能够访问受保护的资源。

步骤 1：初始化 Express.js 应用程序

首先，我们需要使用以下命令行命令安装 Express.js 和其他必要的依赖项：

--- ------- ------- --------------- -------- -------------- ----------- -------------

接下来，我们将创建一个新的 Express.js 应用程序，并用以下代码初始化它：

----- ------- - -------------------
----- ------- - ---------------------------
----- -------- - --------------------
----- ------------- - -----------------------------------
----- ---------- - -----------------------
----- ------------ - -------------------------

----- --- - ----------

---------------- ------------------------ --------- ----- -- -
  -- -----------
----

----------------------------- ----- -- -
  -- --------
---

----------------------------- ----- -- -
  -- ---------
---

------------------------
------------------------------- --------- ---- ----
---------------------------
-----------------
  ------- --------- -----
  ------- ------
  ------------------ -----
----
-------------------------------
----------------------------

---------------- -- -- -
  -----------------------
---

在这个代码中，我们初始化了一个 Express.js 应用程序，安装了几个必要的依赖项。我们还设置了 Passport.js 的本地身份验证策略，以及它所需的序列化和反序列化功能。最后，我们使用了 Express.js 内置的中间件来处理 Cookie、Body 和 Session，以及 Passport 中间件的初始化。

步骤 2：创建注册和登录页面

接下来，我们需要创建用户注册和登录页面。在本示例中，我们使用了 EJS 模板引擎，并将模板文件放置在 views 目录下。

--------- -----
------

------
  ----- ----------------
  -----------------
-------

------
  -----------
  -- -- ------- - --
    -------- ----- --------
  -- - --
  ----- ------------- -------------------
    ---
      -------------------
      ------ ----------- ----------------
    ----
    ---
      ------------------
      ------ --------------- ----------------
    ----
    ---
      ------ ------------- -----------
    ----
  -------
-------

-------
--------- -----
------

------
  ----- ----------------
  -----------------
-------

------
  -----------
  -- -- ------- - --
    -------- ----- --------
  -- - --
  ----- ------------- ----------------
    ---
      -------------------
      ------ ----------- ----------------
    ----
    ---
      ------------------
      ------ --------------- ----------------
    ----
    ---
      ------ ------------- -----------
    ----
  -------
-------

-------

在这两个页面中，我们提供了一个简单的表单供用户输入用户名和密码，以及一个按钮用于提交登录或注册信息。在某些情况下，我们也将显示错误消息。

步骤 3：处理用户注册和登录请求

我们还需要写一些代码来处理用户提交的注册和登录请求。我们将在 Express.js 应用程序中添加两个路由来处理这些请求。请参考下面的代码：

-------------------- ----- ---- -- -
  -------------------------- - ------ ------------------ ---
---

--------------------- ----- ---- -- -
  -- ------------
---

----------------- ----- ---- -- -
  ----------------------- - ------ ------------------ ---
---

------------------ ------------------------------ -
  ---------------- ----
  ---------------- ---------
  ------------- ----
----

在这个代码中，我们添加了两个 GET 路由处理用户注册和登录页面的请求，两个 POST 路由处理用户提交的注册和登录请求。

步骤 4：处理用户身份验证

在上面的代码中，我们向 Passport.js 添加了一个本地身份验证策略，该策略将在用户提交登录表单时使用。现在，我们需要编写相应的验证代码。请参考下面的代码：

---------------- ------------------------ --------- ----- -- -
  ----- ---- - -- ----------- ---

  -- ------- -
    ------ ---------- ------ - -------- ----------- ---
  -

  -- ------------------------------ --------------- -
    ------ ---------- ------ - -------- ----------- ---
  -

  ------ ---------- ------
----

在这个代码中，我们查询数据库以查找与给定用户名匹配的用户记录。如果用户不存在，则将错误消息传递给 done 函数。否则，我们还要使用 bcrypt 库将密码哈希并与数据库中存储的密码进行比较。如果密码不匹配，则也将错误消息传递给 done 函数。如果用户名和密码都是有效的，则将用户对象传递给 done 函数。

步骤 5：处理用户会话

最后，我们需要编写代码来处理用户会话。Passport.js 具有内置的序列化和反序列化功能，这使得我们可以将用户对象存储在会话中。请参考以下代码：

----------------------------- ----- -- -
  ---------- ---------
---

----------------------------- ----- -- -
  ----- ---- - -- ----------- ---

  -- ------ -
    ---------- ------
  - ---- -
    ---------- ------
  -
---

在这个代码中，我们在用户登录成功后将用户 ID 存储在会话中。当用户发起其他请求时，Passport.js 将使用反序列化功能将用户 ID 转换回用户对象。

结论

在此示例中，我们使用 Express.js 和 Passport.js 构建了一个基本的用户登录系统。这个过程中，我们学习了许多关于 Node.js、Express.js 和 Passport.js 的知识，这对于开发其他 Node.js 应用程序非常有用。我们希望这篇文章能够为初学者提供有价值的学习和指导，并使他们更加深入地理解这些技术。如果您有任何问题或反馈，请在评论中留言。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/671a13629babaf620fa0ea03

阅读全文

猜你喜欢

  • 如何使用 Angular CLI 创建模块化应用

    Angular 是一种用于构建 Web 应用程序的 TypeScript 框架。它提供了强大的模块化架构，可帮助开发人员创建可重用和可维护的应用程序。Angular CLI 是一个用于创建和管理 An...

    15 天前
  • 使用 Node.js 进行图片处理的方法

    Node.js 不仅可以用于服务器端应用开发，还可以用于进行图片处理。下面将介绍使用 Node.js 进行图片处理的方法。 安装 Node.js Node.js 可以在官网（https://nodej...

    15 天前
  • Serverless 架构实现 JSON Web Token 解析

    在 Web 应用开发中，许多应用程序都需要实现认证和授权机制。JSON Web Token（JWT）是一种轻量级的身份验证和授权方案，因其易于实现和使用而愈加流行。

    15 天前
  • PWA 离线缓存机制深入研究及实战应用

    前言 随着互联网的普及和移动设备的广泛应用，Web 应用越来越重要。但是，Web 应用天生具备的一些特性（如网络延迟、带宽限制）仍然给用户带来不良体验。Progressive Web Apps (PW...

    15 天前
  • Deno 中的 HTTP 请求和响应技巧

    什么是 Deno？ Deno 是一种基于 Rust 和 JavaScript 的新一代运行时环境，用于运行 TypeScript 和 JavaScript 代码，类似于 Node.js。

    15 天前
  • SASS 中变量相关的 bug 与解决方式

    SASS 是一种 CSS 预处理器，它提供了许多便利的功能，如变量、嵌套、混合等。但是，在开发过程中，我们可能会遇到一些与变量相关的 bug。本文将介绍 SASS 中常见的变量 bug 及其解决方式。

    15 天前
  • 如何使用 Webpack 优化 Angular 应用程序构建速度

    在开发 Angular 应用时，我们通常会使用 TypeScript 编写代码，并使用 Webpack 进行构建。但是随着项目规模的增大，构建时间也会明显增加。为了提高构建速度，我们可以通过以下几种方...

    15 天前
  • 如何使用ES12中新增的ArrayBuffer转换工具？

    什么是ArrayBuffer？ 在学习 ArrayBuffer 转换工具之前，我们先来了解一下什么是 ArrayBuffer。ArrayBuffer 是 ES6 提供的一种用于在 JavaScript...

    15 天前
  • ESLint：如何解决不完整的注释的问题？

    引言 ESLint 是一个流行的前端 JavaScript 代码规范检查工具。其中代码注释的规范也是其中的一个必要内容。如果注释不完整或格式不规范，那么代码的可读性将会受到严重影响。

    15 天前
  • Redis 中的 List 类型的最佳实践

    Redis 是一个流行的内存数据库，它以其速度和可扩展性而闻名。它支持许多数据结构，其中 List 类型是最常用的之一。在本文中，我们将探讨 Redis 中 List 类型的最佳实践。

    15 天前
  • 使你的网站响应式设计得更加完整的用户体验

    在当今数字化的时代，人们使用各种设备访问网站，如台式机、笔记本电脑、平板电脑和智能手机等。而响应式设计就是为了在不同设备上都能获得完整的用户体验。在本文中，我们将介绍响应式设计的原理，并提供几个示例代...

    15 天前
  • 如何使用 MongoDB 进行时间序列分析

    引言 时间序列分析是数据分析中一个非常重要的部分，许多应用都需要对时间序列数据进行存储和分析。MongoDB 是一个流行的 NoSQL 数据库，支持嵌入式文档和动态模式。

    15 天前
  • 前端 JSCore 技能：探究 ES8 中的 async/await 关键字

    前端 JSCore 技能：探究 ES8 中的 async/await 关键字 ES8 中的 async/await 关键字是 JavaScript 中非常重要的新特性之一，让异步编程更加简洁和可读。

    15 天前
  • Jest 框架：Mock Modules 实现及使用技巧

    随着前端开发越来越复杂，JavaScript 测试变得越来越重要。当我们编写 JavaScript 代码时，我们需要通过测试来确保代码正确性，而测试又需要一些工具来帮助我们进行。

    15 天前
  • 如何使用 Go 和 Rust 进行网络程序性能优化

    如何使用 Go 和 Rust 进行网络程序性能优化 前言 随着互联网的普及，网络程序已经成为现代计算机科学领域中的一个重要组成部分。随着互联网的发展，网络程序也在不断增加复杂度。

    15 天前
  • PWA项目框架选型

    作为一种新型的Web应用程序模型，渐进式Web应用（PWA）近年来越来越流行，这种模型打破了传统Web应用只能通过浏览器访问的限制，使用户可以在离线状态下使用应用程序。

    15 天前
  • Web Components 自定义事件及事件触发方式

    介绍 Web Components 是当今前端领域的一个热门话题，其通过对一系列特性的结合，使得用户可以自定义 HTML 元素，进而实现组件化设计。组件化设计在提高代码复用性、降低维护成本等方面有着显...

    15 天前
  • 如何在 Promise.all 中处理并发请求

    如何在 Promise.all 中处理并发请求 在前端开发中，我们经常需要发送多个请求。而在这些请求中，有些请求需要排队等待上一个请求的返回结果，而有些请求则可以并行执行，即不需要等待上一次请求的结果...

    15 天前
  • SASS 的灵活性和适用性介绍

    SASS（Syntactically Awesome Style Sheets）是一个基于 CSS 的预处理器，通过扩展 CSS 语言提供了更多的功能和灵活性。SASS 很流行，因为它可以大大提升前端...

    15 天前
  • 如何在 Webpack 中与 Jest 整合

    如何在 Webpack 中与 Jest 整合 Webpack 是一个现代化的前端打包工具，其中包含了许多插件和配置选项，可用于优化和自定义开发体验。而 Jest 则是一个流行的 JavaScript ...

    15 天前

相关推荐

    暂无文章