Node.js + Angular 11：JWT 身份验证和授权示例
延伸阅读
在本教程中，我们将学习如何构建一个完整的基于 Node.js Express 和 Angular 11 的身份验证示例。后端服务器使用 Node.js Express，并结合 jsonwebtoken 进行 JWT 身份验证和授权，以及 Sequelize 与 MySQL 数据库交互。前端将使用 Angular 11、HttpInterceptor 和 Router 构建。我们还将实现 UI 上的表单验证。
JWT（JSON Web Token）
与需要将会话存储在 Cookie 中的基于会话的身份验证相比，基于令牌的身份验证的最大优势在于，我们将 JSON Web Token (JWT) 存储在客户端：浏览器本地存储、iOS 钥匙串和 Android SharedPreferences……因此，我们无需构建另一个支持原生应用的后端项目，也无需为原生应用用户构建额外的身份验证模块。
JWT 由三个重要部分组成：头部、有效载荷和签名。它们组合在一起构成一个标准结构header.payload.signature：
客户端通常会在x-access-token标头中附加 JWT：
x-access-token: [header].[payload].[signature]
更多详情，请访问：
JWT（JSON Web Token）深度介绍
Node.js Express Angular 11 身份验证示例
它将采用全栈式架构，后端使用 Node.js Express，前端使用 Angular 11。访问权限通过 JWT 身份验证进行验证。
- 用户可以注册新账号，并使用用户名和密码登录。
- 按用户角色（管理员、版主、用户）进行授权
屏幕截图
下面的图片显示了我们的 Angular 11 客户端应用程序的屏幕截图。
– 任何人无需登录即可访问公共页面：
– 新用户可以注册：
– 注册表单验证：
– 使用合法账户登录：
–个人资料页面：
–管理员角色的用户界面：
– 如果一个没有管理员角色的用户尝试访问管理员/版主版块页面：
演示
这是一个完整的 Angular + Node.js Express JWT 身份验证和授权应用程序演示（具有表单验证、检查注册用户名/电子邮件重复、测试具有 3 个角色的授权：管理员、版主、用户）。
视频中我们使用的是 Angular 10，但其逻辑和用户界面与 Angular 版本 11 相同。
用户注册和用户登录流程
该图显示了用户注册、用户登录和授权流程。
我们有两个身份验证接口：
api/auth/signup用户注册api/auth/signin对于用户登录，如果客户端访问受保护的资源，则必须在 HTTP x-access-token标头中添加合法的 JWT 。
后端采用 Node.js、Express 和 Sequelize。
我们的Node.js Express应用程序可以用下图概括：
通过 Express 路由，匹配路由的HTTP 请求在到达安全层之前会先经过CORS 中间件的检查。
安全层包括：
- JWT 身份验证中间件：验证注册信息，验证令牌
- 授权中间件：检查用户在数据库中的角色记录
如果这些中间件抛出任何错误，将会发送一条消息作为 HTTP 响应。
控制器通过Sequelize与 MySQL 数据库交互，并将HTTP 响应（令牌、用户信息、基于角色的数据……）发送至客户端。
使用 Angular 11、HttpInterceptor 和 Router 构建前端
更多详情请访问：
https://bezkoder.com/node-js-angular-11-jwt-authentication/
延伸阅读
全栈式 CRUD 应用：
- Angular + Node.js Express + MySQL 示例
- Angular + Node.js Express + PostgreSQL 示例
- Angular + Node.js Express + MongoDB 示例
使用 HttpOnly Cookie 进行 JWT 身份验证：（已更新）
Node Express + Angular：身份验证和授权示例