使用 Node.js 和 Express.js 处理身份验证的完整指南

面试官:小伙子,你的数组去重方式惊艳到我了

身份验证是一个网站或应用程序中的关键功能,它确保只有授权用户才能访问敏感信息或执行敏感操作。在本文中,我们将介绍如何使用 Node.js 和 Express.js 创建一个带有身份验证的完整 web 应用程序。

设置

在开始编写代码之前,我们需要安装 Node.js 和 Express.js。您可以在 Node.js 官网下载 Node.js 安装包,并在安装 Node.js 后使用 Node.js 的包管理器 NPM 安装 Express.js。

我们还需要安装一些其他的包。在您的项目文件夹中,使用以下命令安装这些包:

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

这些包将用于创建 Express.js 应用程序并处理身份验证。

创建应用程序

我们将使用 Express.js 创建应用程序。在您的项目文件夹中,创建一个名为 app.js 的文件,然后将以下代码写入其中:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在代码中,我们定义了用户模型,包括用户名和密码。我们使用本地验证策略来验证用户凭据,并使用 bcrypt 包进行密码哈希。我们还设置了序列化和反序列化用户对象以处理用户会话。

我们使用 Pug 作为模板引擎,并定义了几个路由来实现用户注册、登录和注销功能。我们使用 Flash 包在路由之间传递消息。

创建模板

我们可以使用 Pug 模板引擎创建模板。在您的项目文件夹中,创建一个名为 views 的文件夹,并在其中创建以下模板文件:

layout.pug

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

index.pug

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

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

login.pug

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

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

register.pug

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

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

运行应用程序

现在我们可以在命令行中使用以下命令运行应用程序:

---- ------

在您的 web 浏览器中,访问 http://localhost:3000,并尝试注册、登录和注销用户以测试应用程序。

结论

在本文中,我们介绍了如何使用 Node.js 和 Express.js 创建一个带有身份验证的完整 web 应用程序,包括用户模型、验证策略和会话处理。我们还介绍了如何使用 Flash 包在路由之间传递消息,并使用 Pug 模板引擎创建模板。这应该为您提供了一些有关身份验证的深度和学习以及指导意义,并提供了一些示例代码让您获得使用身份验证的开端。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/670cc3c85f551281025b976d


猜你喜欢

  • Promise.allSettled 的实现原理

    前言 Promise.all 和 Promise.race 是我们常用的两个 Promise 方法,但是自从 ECMAScript2019 引入了 Promise.allSettled,它也变得越来越...

    5 天前
  • Angular 中如何使用 OpenLayers 地图库进行地图应用开发

    简介 Angular 是一款流行的前端框架,其能更好地组织代码、管理依赖、提供丰富的扩展等优势,越来越多的工程师开始抛弃传统地图开发方式,将地图应用与 Angular 框架结合。

    5 天前
  • ES11 新特性:BigInt 精确数字类型

    在过去的 JavaScript 中,数字类型只能表示从 -2^53 到 2^53 范围内的整数,而对于更大的数字需使用第三方库进行处理。为了解决这个问题,ECMAScript 2020(也称为 ES1...

    5 天前
  • 利用 Enzyme 测试 React 组件的正确方式

    React 是一种流行的 JavaScript 库,可以帮助开发者构建复杂的 Web 应用程序。以 React 为例,它是一种基于组件的开发方式,组件是应用程序的构建快照,组件可以重复使用。

    5 天前
  • 如何使用 Headless CMS 构建在线教育平台的内容管理系统

    前言 在线教育平台是近年来蓬勃发展的行业之一,很多企业和机构都在开发和使用自己的在线教育平台。为了让教学内容能够更加有效地被传达,内容管理系统是必不可少的一部分。 传统的 CMS 存在一些问题,比如界...

    5 天前
  • 利用 GraphQL 开发即时通讯系统的指南

    随着互联网和移动设备的普及,即时通讯系统成为了人们日常生活中必不可少的一部分。对于前端开发者来说,如何利用好现有的技术来开发高效稳定的即时通讯系统成为了一个重要的问题。

    5 天前
  • React SPA 中如何优雅的进行异步数据加载

    React SPA 中如何优雅的进行异步数据加载 React 是一个流行的 JavaScript 库,它可以帮助您构建交互式、动态的用户界面。在 React SPA(单页应用)中,异步数据加载是非常重...

    5 天前
  • Vue.js 应用如何进行单元测试?

    Vue.js 是一个流行的前端框架,它允许我们快速构建 SPA(Single-Page Application),优秀的组件化和可测试性是 Vue.js 尤为吸引开发者的特性之一。

    5 天前
  • 使用 SASS 优化 CSS 代码的常用技巧

    SASS 是一种 CSS 预处理器,它可以让前端开发者更加方便地编写 CSS 代码。相比原生 CSS 语法,SASS 支持变量、嵌套、继承、混入等特性,让 CSS 代码更加模块化、可读性更强、可维护性...

    5 天前
  • Serverless 应用中如何应对密集请求的挑战?

    对于 Serverless 应用来说,面对密集的请求可能会导致高并发和运行时错误,特别是当这些请求需要在短时间内完成非常复杂的任务时。本文将介绍一些应对 Serverless 应用中密集请求的挑战的最...

    5 天前
  • PNG、JPEG、GIF 图片优化技巧

    在网站开发中,图片是不可或缺的一部分。然而,不同类型的图片所占用的空间以及网络加载速度是不一样的。本文将介绍 PNG、JPEG、GIF 三种常见图片格式的优化技巧,让你在图片显示效果与网站加载速度之间...

    5 天前
  • Angular 中使用 Mapbox 地图插件实现交互式地图

    前言 在现代 Web 开发中,地图数据的应用越来越广泛。交互式地图可以帮助用户更好地理解地理位置,找到所需的信息。 Mapbox 是一种开源的地图插件,它提供了许多方便的工具和 API,可以帮助开发者...

    5 天前
  • Fastify 应用程序中的图片上传教程

    对于一个网站来说,图片是必不可少的元素。在 Web 应用程序中,上传图片还经常是用户和服务器之间交流的核心部分之一。Fastify 是 Node.js 的一个快速和低开销的开源 Web 应用程序框架。

    5 天前
  • Headless CMS如何处理媒体资源管理和CDN分发

    在现代web应用程序中,Headless CMS变得越来越流行。Headless CMS主要是将内容管理与界面分离,使得前后端开发可以独立工作。它们通过API提供内容,这样开发人员可以将内容提供给任何...

    5 天前
  • Redis 使用技巧:如何高效地进行批量操作

    在前端开发中,Redis 是一款被广泛使用的缓存数据库。虽然 Redis 有着良好的性能和速度,但在进行批量操作时,仍然需要注意一些技巧和优化策略,以达到更高效的效果。

    5 天前
  • 用 Koa.js 构建基于 OAuth2 的 API

    在现代的前端开发中,使用 API 来获取数据已变得非常流行。而 OAuth2 是一个用于授权的开放标准,也是构建安全稳定的 API 的核心组成部分之一。本文将详细介绍如何使用 Koa.js 框架构建基...

    5 天前
  • GraphQL 中的缓存技巧详解

    在移动应用和 Web 应用的开发中,前端状态管理和网络数据请求常常涉及到缓存问题。GraphQL 是一种出色的数据查询语言(query language),不仅能提高网络请求效率,还能减少不必要的数据...

    5 天前
  • ES12 中的空值合并运算符详解

    在 JavaScript 中,对于未定义、 null 和空字符串等空值所涉及到的处理,一度令开发者头疼不已。为了解决这个问题,ES12 中引入了空值合并运算符,可以方便地处理这些空值。

    5 天前
  • 在 JavaScript 单元测试中使用 Chai.js 的 Should 风格断言

    单元测试是前端开发过程中不可或缺的一环,它可以帮助我们验证代码的正确性和可靠性。而断言库是实现单元测试的关键,它提供了一种对于预期结果的表述。Chai.js 是一个常见的 JavaScript 断言库...

    5 天前
  • 用户体验设计之最佳 Web 无障碍实践

    随着互联网的广泛应用,网站和应用程序的访问者日益增加,其中不乏身体残疾或智力残疾的人群。为此,无障碍设计成为 Web 开发中不可或缺的一部分,即为用户体验提供真正的普及性。

    5 天前

相关推荐

    暂无文章