Express.js 中 JSON Web Token 的使用教程

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

在 Express.js 中使用 JSON Web Token(JWT)进行身份验证已经成为了一个相当流行的做法。JWT 是一种基于 JSON 的开放标准,用于在网络应用程序之间安全传输信息。JWT 可以作为一种简洁致密的方式,在用户和服务器之间传递信息,同时保证了信息的可靠性和完整性。

本篇文章将介绍 JWT 的基本概念和使用方法,并且提供一个实用的示例来演示 JWT 在 Express.js 中的应用。

JWT 基本概念

JWT 由三部分组成:头部、载荷和签名。它们的结构如下所示:

-----------------
  • 头部:包含了两个部分,分别是令牌的类型(这里是JWT)和使用的算法(比如HMAC SHA256或者RSA)。
  • 载荷:包含了要传输的信息,明文格式,只要不放敏感数据就行。
  • 签名:使用算法对头部和载荷进行加密,防止信息被篡改。

JWT 中最关键的部分是载荷,它可以存储用户的信息以便于服务器进行验证和识别。一旦签名被伪造,想要篡改载荷就十分容易了,因此应该将敏感数据存储在服务器端。

在 Express.js 中使用 JWT

在 Express.js 中使用 JWT 的首要目标就是要实现用户身份的验证。我们可以将 JWT 这种身份验证方式分为两个步骤:

  1. 登录:当用户提供了正确的用户名和密码之后,服务器会颁发一个 JWT 令牌作为登录凭证。
  2. 请求:用户在每一次需要进行身份验证的请求中,都需要在请求的头部中带上 JWT 令牌,在服务端进行验证。

下面是一个基于 Express.js + JWT 的示例代码:

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

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

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

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

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

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

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

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

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

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

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

首先,我们定义了一个 users 数组,用于存放用户信息。然后我们在 app.post('/login') 中实现了用户登录的逻辑。当用户提供正确的用户名和密码后,我们调用 jwt.sign 方法生成一个 JWT 令牌,并将其作为响应返回。

app.get('/protected') 这个路由(API)是需要进行身份验证的。为了实现这个功能,我们定义了一个名为 authenticateToken 的中间件,它会验证 JWT 令牌并在通过验证后将用户信息存储在请求对象中。在这个例子中,我们只简单地将用户 ID 作为响应返回。

总结

本文介绍了 JWT 的基本概念以及在 Express.js 中的应用。根据本文提供的代码示例,你可以在自己的项目中轻松地实现基于 JWT 的用户身份验证功能。同时,本文还提醒了读者,不要将敏感数据存储在 JWT 的载荷中,而应该将其存储在服务器端。

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


猜你喜欢

  • # 使用 ES6 Modules 替代 require.js

    使用 ES6 Modules 替代 require.js 在前端开发中,模块化是一种非常重要的编程思想。通过模块化可以将代码分解为易于管理和维护的小块,提高代码的复用性和可读性。

    1 年前
  • 性能优化实践:利用 cookie 优化网站性能

    在今天互联网高速发展的时代,用户对于网站的性能和体验提出了更高的要求。作为前端开发人员,在设计和优化网站时需要注意多方面的问题,其中一个重要问题就是网站的性能优化。

    1 年前
  • Redis 使用队列实现消息消费系统

    随着互联网应用的不断发展和用户数量的不断增加,消息消费系统成为了许多应用中不可或缺的一部分。Redis 作为一款高性能、高可靠性的 Key-Value 存储系统,可以使用其队列功能来实现消息消费系统。

    1 年前
  • 解决在 ES9 中使用 Array.prototype.reduce() 时可能会遇到的问题

    前言 在 JavaScript 中,Array.prototype.reduce() 是一种非常强大且灵活的函数,它可以帮助我们对数组中的元素进行累加、去重、筛选等一系列操作。

    1 年前
  • 跨平台 Socket.io 通信实现方案

    前端开发中,有时需要进行跨平台通信,其中 Socket.io 是一个较为流行的通信框架。本文将介绍如何使用 Socket.io 实现跨平台通信,并提供示例代码。 Socket.io 简介 Socket...

    1 年前
  • 从 Deno 到 Preact 的路程

    前言 作为一名前端开发者,我们需要不断升级自己的技术,学习新的工具和框架以应对不断变化的市场需求。本文将会介绍从 Deno 到 Preact 的学习路程,探究其特性以及如何在实际项目中应用。

    1 年前
  • Kubernetes 集群监控中的 Prometheus 详解

    随着云计算和容器化技术的发展,Kubernetes 已经成为了互联网公司中最主流的容器管理平台之一,它能够自动扩缩容,定期备份和自动恢复服务等等。Kubernetes 作为快速开发的利器,但是在实际生...

    1 年前
  • 在 AngularJS 的 SPA 中使用 ui-router 的最佳实践

    在 AngularJS 的 SPA 中使用 ui-router 的最佳实践 随着 Web 应用程序的复杂性不断增加,Web 应用程序框架也在不断地提供更好的工具来满足需求。

    1 年前
  • Node.js 中如何使用 WebSocket 实现 WebRTC?

    前言 WebRTC (Web Real-Time Communication) 是现代 Web 技术中非常重要的一部分,它可以在浏览器中实现高质量的实时音视频通信。

    1 年前
  • 解析 ES2021 新特性中的 Promise.any

    ES2021 引入了一个新的 Promise 方法:Promise.any。这个方法可以接受一个数组作为参数,其中的 Promise 对象只要有一个 resolve,整个 Promise.any 就会...

    1 年前
  • 使用 Fastify 和 Redis 构建数据缓存

    近年来,随着互联网的发展和用户需求的不断增加,数据量和处理数据的速度越来越成为关键问题。对于前端开发人员而言,如何提高系统的响应速度,避免重复计算、提高资源利用率等都是需要考虑的问题。

    1 年前
  • CSS Flexbox 在实现网站主体布局中的最佳实践

    Flexbox 是一种强大的 CSS 布局模式,它可以让我们轻松地创建响应式且灵活的布局。在本文中,我们将讨论如何使用 Flexbox 在实现网站主体布局中的最佳实践。

    1 年前
  • Chai 库中如何判断一个变量是否为 null 或 undefined?

    在 JavaScript 中,经常需要判断一个变量是否为 null 或 undefined,这是一种基本的防御性编程方法。如果不进行判断,当调用这个变量的方法时,有可能会产生错误。

    1 年前
  • 如何使用 Enzyme 测试 React 组件的 render 方法?

    引言 随着前端技术的不断发展,React 组件已经成为了前端开发的重要部分。为了保证 React 组件的质量,我们需要不断地进行测试。而 Enzyme 是一个流行的 React 测试工具,可以帮助我们...

    1 年前
  • 如何通过 LESS 实现字体图标的配色方案

    介绍 在网站开发中,字体图标早已成为不容忽视的一部分。它们可以用来解决图像图片因体积而降低加载速度等问题,也能使网页设计更具灵活性。自定义字体图标不仅满足了各种设计和排版的需求,而且在多个设备间的显示...

    1 年前
  • Mocha + SuperTest 实现 RESTful API 自动化测试

    RESTful API 是现代应用开发的基础,自动化测试是代码质量保证的必要手段。本文介绍了如何使用 Mocha 和 SuperTest 实现 RESTful API 自动化测试。

    1 年前
  • 如何为无障碍用户提供更好的文字描述

    随着互联网的发展,在网页和应用中使用的图片、图表、视频等多媒体越来越多,然而这些多媒体有时会给视障用户带来困扰,因为视障用户无法获得图像的信息。为了解决这一难题,我们需要更好的文字描述来给视障用户提供...

    1 年前
  • RxJS 加强版:使用 Operator 操作符实现更高效的数据缓存

    什么是 RxJS? RxJS 是一个基于观察者模式的库,用于构建基于事件的异步和基于事件的程序。它提供了一种使用可观察序列来简化异步代码的方法。RxJS 扩展了核心观察者模式,以支持其他模式,例如流、...

    1 年前
  • 详解:优化 Babel7 的 Plugin 使用

    随着前端技术的发展,Babel7 作为一个十分流行的 JavaScript 编译器,无疑是我们的必备工具之一。而在前端开发中,使用 Babel7 的 Plugin 可以使代码编译得更加高效和精准。

    1 年前
  • Material Design 风格下实现圆形 ImageView 的方法

    Material Design 是 Google 推出的基于平面设计的新一代设计语言,注重简单、直观、有目的性的设计,受到了广泛的认可。其中一个重要的设计元素就是圆形头像。

    1 年前

相关推荐

    暂无文章