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

在 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


猜你喜欢

  • 使用 Socket.io 进行物联网数据实时处理

    使用 Socket.io 进行物联网数据实时处理 随着物联网技术的发展,越来越多的设备需要进行数据的实时处理,传统的基于 HTTP 协议的 RESTful API 已经无法满足这种需求。

    1 年前
  • 使用 Chai 进行接口测试:如何判断数组中对象属性的顺序?

    在前端开发中,接口测试是一个非常重要的环节。而 Chai 是一个流行的 JavaScript 测试库,能够帮助我们方便地编写接口测试脚本。但是在进行接口测试时,如果需要判断数组中对象属性的顺序,可能会...

    1 年前
  • 性能优化实战:前端事件优化实践

    随着 Web 应用程序的复杂化,用户与应用的交互愈发频繁。在这种情况下,有时候前端事件处理也会变得复杂,很容易出现性能问题。本篇文章将介绍一些前端事件优化的实践,以帮助你优化你的 Web 事件处理和提...

    1 年前
  • 避免 CSS Reset 引起的图片对齐不准问题

    避免 CSS Reset 引起的图片对齐不准问题 在进行前端开发时,我们经常会使用 CSS Reset 来清除浏览器默认样式,以便更容易地实现自己的设计。然而,CSS Reset 牵扯到诸多问题,其中...

    1 年前
  • 使用 Deno 和 Vue.js 开发全栈应用

    随着前端技术的不断发展,全栈开发也越来越受到关注。本文将介绍如何使用 Deno 和 Vue.js 开发全栈应用。Deno 是一种新的 JavaScript 运行时,它具有安全性、快速性和可扩展性等特点...

    1 年前
  • Node.js 中如何使用 Redis 进行数据缓存?

    随着 Web 应用的普及,数据缓存在前端开发中变得越来越重要。Node.js 中使用 Redis 进行数据缓存是一种常见的做法。本文将详细介绍如何在 Node.js 中使用 Redis 进行数据缓存,...

    1 年前
  • Fastify 如何处理并发请求

    前言 Fastify 是一个基于 Node.js 的轻量级 Web 框架,简洁高效,支持异步请求处理,适合构建高效的 Web 应用。在实际应用中,Fastify 可以遇到大量并发请求,在处理过程中,要...

    1 年前
  • 基于 Enzyme 实现 React 的渲染模板测试

    React 已经成为现代 Web 开发中使用最广泛的 JavaScript 库之一,而且随着 React 的不断演进和发展,编写高质量的 React 组件已经成为现代 Web 开发领域中不可避免的任务...

    1 年前
  • 用 Headless CMS 实现的智能自动化流程分享

    随着互联网时代的到来,前端开发变得越来越重要。对于前端开发人员而言,要想实现智能化的自动化流程,Headless CMS 是一个必不可少的工具。在这篇文章中,我们将探讨如何使用 Headless CM...

    1 年前
  • PM2 使用心得

    简介 PM2 是一个强大的 Node.js 进程管理器和负载均衡工具。它具有很多功能,比如自动重启、开箱即用的负载均衡、内存监控、日志管理等。 本文将介绍 PM2 的一些常用功能及使用心得,帮助读者更...

    1 年前
  • 使用 TypeScript 将日志记录集成到你的 React 应用程序中

    在开发应用程序时,日志记录是重要的一部分,它不仅可以帮助我们排查问题,也可以通过分析日志来优化程序性能。使用 TypeScript 将日志记录集成到 React 应用程序中,可以更好地维护和管理应用程...

    1 年前
  • 通过 Webpack 简化 Web 开发流程

    在现代 Web 开发中,随着前端技术的不断发展,越来越多的前端工具被应用于项目中。其中,WebPack 是一个用于打包应用程序的工具,通过提供静态资源打包、JS 代码分割、代码压缩等多种功能,可以大大...

    1 年前
  • 如何使用 Jest 框架测试一个 React 的高阶组件

    在前端开发中,单元测试是一个非常重要的环节,它可以保证代码的质量,并且能够帮助我们发现问题。Jest 是 Facebook 推出的一款 JavaScript 测试框架,它简单易用,支持快照测试和测试覆...

    1 年前
  • 如何使用 ARIA 标准完善无障碍用户体验

    随着Web技术的不断发展,越来越多的人开始使用互联网来获取信息、进行交流和购物等行为。然而,仍然有很多人受到视觉、听觉、认知和身体等方面的障碍,这些障碍导致他们难以访问网站并获取所需信息。

    1 年前
  • 使用 ESLint 解析器严格化 JavaScript 开发的规范

    使用 ESLint 解析器严格化 JavaScript 开发的规范 在前端开发的过程中,代码的规范性和可读性是非常重要的。使用 ESLint 解析器可以帮助我们实现对代码质量的控制和提升,让我们的代码...

    1 年前
  • PWA 应用中的多语言适配方法与实践

    作为一款跨平台,可离线访问的 web 应用,PWA 现在被越来越多的开发者所使用。在开发 PWA 应用的过程中,本地化的问题也逐渐得到了更多的关注。本文将介绍在 PWA 应用中实现多语言适配的方法和实...

    1 年前
  • Tailwind CSS 实战技巧:如何实现页面滚动效果?

    在前端开发中,滚动效果是非常常见且重要的一种交互方式。而使用 Tailwind CSS,可以让页面的滚动效果实现起来更加方便和简单。本文将介绍使用 Tailwind CSS 实现页面滚动效果的技巧和方...

    1 年前
  • Material Design 风格下实现循环进度条的方法

    在现代 Web 开发中,Material Design 已经成为一种非常流行的设计风格,特别是在移动端应用和响应式网站中。不令人惊讶的是,越来越多的网站开始体验 Material Design 的视觉...

    1 年前
  • Redux 和 Context API 的区别和使用场景

    引言 在前端开发中,传递数据是非常重要的,而 React 是一个高性能 UI 框架,在它的生态系统中 Redux 和 Context API 都是比较流行的状态管理工具,但是不同场景下它们的使用方法和...

    1 年前
  • React Native 中如何实现下拉刷新和上拉加载更多

    React Native 中实现下拉刷新和上拉加载更多可以让我们的应用更加流畅,并提高用户体验。本文将详细介绍如何通过React Native来实现这两种操作。 1. 引入组件 首先,我们需要在Rea...

    1 年前

相关推荐

    暂无文章