Express.js 中 JWT 鉴权的实现方法

什么是 JWT?

JWT(JSON Web Token)是一种基于 Token 的用户身份认证方式,当用户认证成功后,服务端会生成一段包含用户身份信息的 Token,这个 Token 在客户端存储,每次请求时都携带这个 Token 发送给服务器,服务器使用特定的算法对 Token 进行解密并验证,如果验证成功,则认为请求是合法的。

Token 是一段非常长的字符串,包含三部分,分别是 Header、Payload 和 Signature,其中 Header 和 Payload 都是 JSON 格式的,Signature 是采用指定算法对 Header、Payload 和密钥一起加密后的结果。

为什么要使用 JWT?

使用 JWT 鉴权的优点在于:

  1. 简单易用:JWT 不需要在服务端存储用户身份信息,只需要在生成 Token 时把用户身份信息加密后加入 Payload 中,减少服务端存储的压力。
  2. 安全可靠:JWT 采用密钥对 Token 进行加密和解密,只有拥有密钥的人才能对 Token 进行验证和解密,避免了用户信息被泄露的风险。
  3. 适用于分布式系统:由于 JWT 的 Token 包含了用户的身份信息,因此可以用于分布式系统中,多个服务之间可以共享用户的身份信息。

在 Express.js 中,可以使用 jwt 和 express-jwt 来实现 JWT 鉴权,下面是具体的实现步骤:

步骤1:安装依赖

在项目的根目录下,使用以下命令安装 jwt 和 express-jwt 依赖:

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

步骤2:生成 Token

在用户登录成功后,服务器需要生成一个包含用户身份信息的 Token,下面是一个生成 Token 的示例代码:

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

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

在上面的代码中,使用 jsonwebtoken 的 sign() 方法生成 Token,其中 payload 表示需要加密的用户身份信息,secret 表示加密的密钥,expiresIn 表示 Token 的有效期。

步骤3:设置路由鉴权

在需要进行鉴权的路由中,使用 express-jwt 中间件来对 Token 进行验证,下面是一个设置路由鉴权的示例代码:

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

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

在上面的代码中,使用 express-jwt 中间件来验证 Token,secret 表示解密的密钥,当 Token 校验成功后,会自动把用户身份信息加入 req.user 对象中,可以通过 req.user 访问到用户的身份信息。

步骤4:捕获错误

当 Token 验证失败时,需要捕获相关的错误信息,并返回给客户端,下面是一个捕获错误的示例代码:

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

在上面的代码中,使用 express 中的错误处理中间件对错误进行捕获和处理,如果错误类型是 UnauthorizedError,则表示 Token 校验失败,需要返回相关的错误信息。

总结

在 Express.js 中使用 JWT 鉴权可以有效地提升用户身份认证的安全性和可用性,同时应用 JWT 鉴权也可以方便实现分布式系统中的用户身份共享功能。下面是本文的示例代码::

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

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

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

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

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

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

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

我们可以使用 Postman 工具进行测试,首先进行登录操作(请求方法:POST,请求地址:http://localhost:3000/login,请求 body:{"username": "admin", "password": "123456"}),成功登录后会返回 Token,接下来在请求头中添加 Autherization 属性,把 Token 作为属性值,然后再请求访问 http://localhost:3000/protected,如果 Token 验证通过,会返回 200 状态码和成功信息,否则会返回 401 状态码和错误信息。

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


猜你喜欢

  • React.js SPA 应用实现登录超时自动跳转登录页面的方法

    在基于 React.js 的单页应用(Single Page Application, SPA)中,我们经常需要实现用户登录认证功能,其中一个重要的需求就是当用户在一段时间内没有操作时,系统会自动跳转...

    1 年前
  • 如何使用 SASS 编写更高效的 CSS 代码

    在前端开发过程中,CSS 是不可或缺的一部分。但是,随着项目规模的增大和样式表的复杂度上升,手写 CSS 代码会变得越来越繁琐,这就需要我们寻找更高效的解决方案来提高开发效率。

    1 年前
  • TypeScript 中类的静态类型与动态类型的区别

    在前端开发中,TypeScript 是一个非常流行的静态类型语言。在 TypeScript 中,我们可以通过类(class)实现面向对象编程。类的静态类型与动态类型是 TypeScript 中的两个重...

    1 年前
  • ES9 中异步迭代器的应用实例

    在 ES9 标准中,JavaScript 引入了异步迭代器,使得我们可以更加方便地处理异步操作和迭代器。在本文中,我们将探讨异步迭代器的应用实例,并演示如何使用它们来处理异步操作。

    1 年前
  • 如何在移动端利用 Server-Sent Events 实现 Web 实时交互?

    Web 实时交互是现代 Web 应用的关键特性之一。尽管 Web 基于 HTTP,其请求-响应机制使得传统的实时交互较为困难。而 Server-Sent Events(SSE)是一种针对移动端的有效解...

    1 年前
  • Express.js 中的 Websocket 实现详解

    Websocket 是一种在客户端和服务器端之间创建双向通讯的技术,它允许浏览器和服务器之间进行实时交互。在现代的 web 开发中,Websocket 已经成为不可或缺的一部分,大量的应用程序都已经将...

    1 年前
  • 使用 Chai 和 Sinon 进行 Mock 测试

    在前端开发中,常常需要模拟服务器返回的数据进行测试,以确保前端应用在服务器返回数据异常或缺失时能够正常运行。为了方便地模拟这些数据,我们可以使用 Chai 和 Sinon 库进行 Mock 测试。

    1 年前
  • Jest 使用教程指南

    Jest 是一个由 Facebook 开发的 JavaScript 测试框架,广泛用于前端应用程序的单元测试、集成测试和端到端测试。Jest 通过提供简洁、直观的 API 和丰富的功能来解决测试冗长和...

    1 年前
  • Kubernetes 中,如何部署一个带有多个容器的 Pod?

    Kubernetes 是一款流行的开源容器编排平台,它可用于自动化部署、扩展和管理容器化应用程序。Kubernetes 通过基于容器的虚拟化技术与集群进行交互,以确保应用程序在不同节点上运行的高可用性...

    1 年前
  • ES7 中的 CSP:较强的并发编程支持

    CSP (Communicating Sequential Processes) 是一种并发编程模型,旨在通过通信而不是共享状态,协调不同执行体之间的交互和协作。CSP 的一大优点是避免了共享状态带来...

    1 年前
  • 使用 GraphQL 存储过程来提高性能

    如果你是一位前端开发者,你可能已经听说过 GraphQL 这一技术。GraphQL 是一种用于 API 的查询语言,它能够帮助我们有效地查询和获取数据。与 RESTful API 不同的是,Graph...

    1 年前
  • 如何在 Serverless 平台上创建无处不在的监视器

    Serverless 架构越来越受到关注,而利用这种架构来构建应用程序可以快速、高效地创建 API 和计算资源,但是得益于其分布式的特性,也给监视和故障排除带来了挑战。

    1 年前
  • Material Design 中的字体规范详解

    Material Design 是 Google 推出的一种用户界面设计语言,目的是为了推广设计的统一性和流畅性。在 Material Design 中,字体规范是重要的一部分,因为字体对用户阅读体验...

    1 年前
  • 精通 CSS Reset 提高网页质量的技巧

    在前端开发中,CSS Reset 是一个非常重要的概念。它的作用是把所有的浏览器默认样式全都清除掉,让网页展现出一致的效果。实际上,不同的浏览器对一些 HTML 元素的默认样式有所不同,这常常会导致开...

    1 年前
  • ES11 之 Promise.allSettled():让异步编程更简单

    在前端开发中,异步编程是非常常见的。而 Promise 是异步编程的一种方式,它可以简化异步编程的过程,使代码更加可读、可维护。 ES11(也称为 ECMAScript 2020)新加入了 Promi...

    1 年前
  • 解决 Custom Elements 和 CSS Cascading 的常见问题

    前言 在前端开发中,我们经常需要使用 Custom Elements 和 CSS Cascading 技术来实现自定义组件和样式效果。虽然这些技术在实现各种复杂组件和效果方面非常强大,但也经常出现一些...

    1 年前
  • 如何在 Mocha 中使用 async/await 进行单元测试

    在前端开发中,单元测试旨在确保每个函数和代码块都能如预期般正常工作。Mocha 是一个常用的测试框架,可以让我们方便地编写和运行测试用例。在这篇文章中,我们将讲解如何在 Mocha 中使用 async...

    1 年前
  • RxJS 实现 WebSocket 长连接利器

    WebSocket 是 HTML5 推出的一种新型网络通信协议,它使得浏览器与服务器之间可以进行全双工通信,允许服务端实时向客户端推送信息。RxJS 是 Reactive Extensions 的实现...

    1 年前
  • RESTful API 和 GraphQL 的实际应用案例

    在前端开发中,接口设计的好坏直接影响到软件的质量和用户体验。RESTful API 和 GraphQL 是当今最常用的接口设计方案,它们都有其独特的优点和适用场景。

    1 年前
  • 如何在 LESS 中使用条件语句来处理不同的样式效果

    LESS 是一种 CSS 预编译语言,它为开发者提供了很多便捷的工具和语法,可以更加快捷、高效地编写 CSS 样式。其中,条件语句是一种非常实用的语法,可以根据条件不同生成不同的 CSS 样式,本文将...

    1 年前

相关推荐

    暂无文章