如何在 Express.js 中使用 JSON Web Token(JWT)进行身份验证

随着 web 应用程序的不断增长和发展,安全性变得越来越重要。在现代 web 应用程序中,用户身份验证通常是其中的一个关键组件,因为它确保只有已登录用户可以访问应用程序的受限页面和资源。在本文中,我们将介绍如何在 Express.js 中使用 JSON Web Token (JWT) 进行身份验证,以便提高 web 应用程序的安全性。

什么是 JSON Web Token?

JSON Web Token 是一种安全传输信息的解决方案,它允许在两个应用程序之间传输数据,同时保证数据的完整性和机密性。该标准定义了一种紧凑且自包含的数据格式,其中数据以 JSON 对象的形式传输,并附有数字签名,以确保数据完整性。JWT 包含三个部分:头部、载荷和签名。

  1. 头部(Header):通常包含算法和令牌类型的信息,它指示接收者如何验证该令牌。
  2. 载荷(Payload):存储令牌内的信息,如用户角色和权限。载荷不加密,因此应避免在 JWT 中存储敏感信息。
  3. 签名(Signature):根据头部和载荷生成的数字签名以确保数据的完整性。

如何在 Express.js 中使用 JSON Web Token 进行身份验证?

现在我们来看看如何在 Express.js 中使用 JWT 进行身份验证。使用以下步骤:

步骤1:添加依赖项

您需要为您的项目添加以下依赖项:

--- ------- ------- ------------ ----------- ------
  • express - 快速而灵活的 Node.js Web 应用程序框架
  • jsonwebtoken - JSON Web Token 轻量级实现
  • body-parser - Node.js 中间件,用于解析 JSON、Raw、文本和 URL 编码的数据。

步骤2:创建一个中间件

我们将创建一个名为 verifyToken 的中间件函数,该函数将从传入的请求中提取 JWT 并验证令牌。如果验证通过,则调用下一个中间件;否则,它将返回错误“未授权”。

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

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

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

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

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

在这个中间件函数中,我们首先从传入的请求头中提取 JWT 令牌。如果令牌不存在,则返回错误消息 "未授权"。如果令牌存在,则使用 secretKey 解密并验证令牌。如果验证通过,我们将从令牌中提取用户 ID,并调用下一个中间件。否则,我们将返回错误消息 "Token 无效"。

步骤3:创建登录和注册路由

接下来,我们将创建两个路由来处理用户登录和注册请求。我们将使用 /login/register 路由,这些路由将向服务器发送 POST 请求以进行身份验证和注册。

登录路由

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

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

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

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

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

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

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

在这个例子中,我们使用 jwt.sign() 方法为用户生成 JWT 令牌。我们还使用 verifyToken 中间件来保护 /me 路由,从而确保只有经过身份验证的用户可以访问该路由。如果 /me 路由被访问,verifyToken 中间件将验证 JWT 令牌,然后将用户 ID 附加到请求对象中。然后,处理具体业务逻辑。

注册路由

可以按照以下代码进行注册。

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

步骤4:运行服务器和测试

现在可以运行服务器并测试身份验证和保护的路由了。

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

使用 Postman 或任何其他 API 测试工具向服务器发送 POST 请求以模拟登录,如下所示:

如果用户名和密码有效,则服务器将生成一个 JWT 令牌,并将其返回到客户端。随后,我们将使用所返回的 JWT 令牌访问受保护的 /me 路由。

如果 JWT 令牌被正确解码和验证,则服务器将返回验证用户身份的响应。

总结

在本文中,我们讨论了如何在 Express.js 中使用 JSON Web Token 进行身份验证。JWT 提供了一种安全而简单的方式来保护您的系统资源并限制对资源的访问。我们看到如何创建一个中间件函数来解码和验证 JWT,并在受保护的路由中使用它来限制只有经过身份验证的用户才能访问。最后,我希望您现在已经掌握了如何在 Express.js 应用程序中实现身份验证并保护路由。

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


猜你喜欢

  • Flexbox 布局下的区域垂直居中技巧

    在前端开发中,布局一直是一个非常重要的问题。而在布局中,垂直居中是大家经常碰到的问题之一。Flexbox 布局技术提供了一种简单且灵活的方式来实现区域的垂直居中。本文将讨论 Flexbox 布局下的区...

    1 年前
  • CSS Reset 中清除 Google Map 自带样式的方法

    作为前端开发者,在制作地图时经常会用到 Google Map,但是经常会遇到 Google Map 自带的一些样式与我们的网页样式不一致,影响我们的页面效果。那么如何清除 Google Map 自带的...

    1 年前
  • Enzyme 测试中 mock 函数的使用与场景分析

    Enzyme 测试中 mock 函数的使用与场景分析 在前端开发中,我们经常使用 Enzyme 来进行 React 组件测试。Enzyme 是一个用于测试 React 组件的 JavaScript 测...

    1 年前
  • 使用 RxJs 的 `takeUntil` 解决 Angular 取消 HTTP 请求

    在实际开发中,我们常常需要进行一些 HTTP 请求。例如,当用户在搜索框中输入内容时,页面需要及时地展现搜索结果。然而,还有一些情况需要考虑,例如用户反悔了,或者页面已经跳转了。

    1 年前
  • 使用 Socket.io 实现双人视频聊天

    在现代网络技术的发展中,视频通信已经成为了必不可少的一种方式。而在 Web 开发领域中,实现双人视频聊天就成了一项重要的技术任务。使用 Socket.io 技术实现双人视频聊天,可以使得交互体验更加良...

    1 年前
  • 详解 Babel 编译过程中遇到的报错及其解决方案

    Babel 是前端开发中常用的一个工具,它可以将最新的 JavaScript 语法转化为低版本的语法,从而达到兼容更多浏览器的目的。在使用 Babel 进行编译的过程中,我们也经常会遇到一些报错。

    1 年前
  • 如何在 Vue.js 单页应用程序中使用 UI 组件?

    前言 Vue.js 是一个流行的 JavaScript 框架,它可以帮助开发者轻松实现前端交互功能。Vue.js 提供了各种现成的组件,可以帮助开发者快速搭建应用程序。

    1 年前
  • Node.js 中如何使用 WebSocket 进行多人游戏开发

    在现如今的互联网时代,多人游戏已经成为了一种趋势,越来越多的游戏开发者开始尝试使用 WebSocket 进行多人游戏的开发。在 Node.js 中,使用 WebSocket 进行多人游戏开发也是非常方...

    1 年前
  • PWA 应用中的路由实现方案

    随着 PWA 技术的兴起,越来越多的网站开始考虑将自己打造成一个 PWA 应用。而在 PWA 应用中,路由(Routing)是一个不可或缺的部分。本文将介绍 PWA 应用中常见的路由实现方案,包括 S...

    1 年前
  • 如何解决 Express.js 已经垮掉的回调地狱

    回调地狱(Callback Hell),指在 JavaScript 中多个回调嵌套调用的代码结构,导致代码难以维护、阅读和测试。在 Express.js 中使用回调函数的场景非常常见,如果不采取一些措...

    1 年前
  • 在 Jest 测试套件中使用 Firebase

    Firebase 是 Google 推出的一款为开发者提供云服务的平台,包括数据库、认证、推送等等。在前端开发中,我们经常使用 Firebase 来搭建一个数据库或者实现一些用户行为记录。

    1 年前
  • Material Design下CoordinatorLayout的详解与使用

    介绍 Material Design 是由 Google 推出的一种全新的设计风格,这种设计风格融合了平面化、动态效果、卡片设计等多种元素,在近些年的应用界面设计中得到了广泛的应用。

    1 年前
  • Serverless 框架的部署错误:无法识别 “serverless.yml” 问题解决

    问题描述 当您尝试使用 Serverless 框架部署服务器时,您可能会遇到以下错误信息: ------ ------ -- -------- - ----- ------------- ---- -...

    1 年前
  • 在 Next.js 项目中使用 WebSockets 实现双向通信的方法

    什么是 WebSockets? WebSockets 是一种在客户端和服务器之间实现双向通信的协议。它是基于 HTTP 协议的,但是相比于 HTTP,它可以在同一个 TCP 连接上实现持续的、低延迟的...

    1 年前
  • Hapi.js 插件之 hapi-garbage 插件详解

    前言 在现代web应用程序中,我们经常需要进行资源管理和垃圾回收。Hapi.js是一个流行的Node.js框架,它可以帮助我们快速构建和管理web应用程序。hapi-garbage插件是一个非常有用的...

    1 年前
  • ECMAScript 2019 引入私有属性:如何使用并避免命名冲突

    前言 在过去,JavaScript 中没有私有属性和方法的概念。开发者通常使用一些命名约定来不直接访问内部方法和属性。例如,使用下划线前缀,比如 _foo,表示该属性为私有属性,不应该被直接访问。

    1 年前
  • docker-compose 环境搭建及常见问题解决方法

    什么是 docker-compose? Docker-compose 是 Docker 公司推出的一个用于定义和运行多个 Docker 容器的工具。使用 Docker-compose,可以通过一个 Y...

    1 年前
  • 解读 ECMAScript 2020 的块级作用域

    在 ECMAScript 2020 规范中,块级作用域(Block-scoped declarations)得到了强化和拓展,从而使得编写 JS 代码变得更加方便和高效。

    1 年前
  • 使用 Sequelize 处理日期类型数据的技巧

    在 Web 开发中,经常会涉及到日期类型数据的处理。Sequelize 是一个 Node.js 中的 ORM 框架,可以帮助我们在后端应用中处理数据库操作。本文将介绍使用 Sequelize 处理日期...

    1 年前
  • Promise.allSettled() 的使用及注意事项

    Promise.allSettled() 是一个ES2020新增的Promise方法,它可以在所有Promise都已经fulfilled或rejected后返回一个数组,该数组包含每个Promise的...

    1 年前

相关推荐

    暂无文章