对于现代应用程序,安全性是一个必不可少的特征。在客户端和服务器之间进行 HTTP 通信时,HTTP 身份验证是保护应用程序数据以及防止恶意攻击的一种重要方法。 JSON Web Tokens(JWT)是一种经过验证的方法,用于在应用程序的客户端和服务器之间进行安全 HTTP 通信。JWT 安全性高、使用方便,可以轻松地在 Angular 应用程序中使用。
什么是 JWT
JSON Web Tokens(JWT)是一种开放标准(RFC 7519),用于在两个实体之间进行安全通信,而这两个实体可以是一个客户端和一个服务器,或两个服务器之间。JWT 最初是由 RFC 7519 定义的,它由三个部分组成,分别是:头部、载荷和签名。
头部包含了 JWT 的类型以及所使用的签名算法信息,例如:
- ------ -------- ------ ----- -
载荷是 JWT 中用来存储实际数据的部分,例如用户的 ID、角色等,可以自由定义所需的数据。载荷的示例:
- ------ ------------- ------- ----- ----- ------ ---------- -
签名是 JWT 用来验证消息完整性的部分,有助于防止数据被篡改。签名示例:
----------- ----------------------- - --- - ------------------------- -------
JWT 的主要优点是轻量化且安全性高,可以轻松地在应用程序中传递信息。
如何在 Angular 应用程序中使用 JWT 进行身份验证
在 Angular 应用程序中使用 JWT 身份验证涉及以下步骤:
步骤 1:安装依赖项
安装 jsonwebtoken 库和 @auth0/angular-jwt 库,它们将用于创建令牌和验证令牌。
--- ------- ------------ ------------------
步骤 2:创建服务
创建名为 auth.service.ts 的服务,用于处理 JWT 身份验证的逻辑。
------ - ---------- - ---- ---------------- ------ - ------ - ---- ------------------ ------ - ---------------- - ---- --------------------- ------ - -- --- ---- --------------- ------------- ----------- ------ -- ------ ----- ----------- - ------- ---------- ---------------- - --- ------------------- ------- ------ ------- ------------------- ------- ------- -- ------ ------------------ ------- - ----- ----- - ---------------- ------ -------------------------------------- - ------ ----------- ------ - -- ------------- - ---------- - ------------------------------------- - ------ ----------- - ------ --------------- ------- --------- -------- ---- - -- ---- ----- --- --- --- --- ----- ----- ----- - ---------- --------- -------- -- -------------- ------------------------------------ ------- ---------- - ------ ------------------------------- - ------ --------- ---- - ---------------------------------------- ---------- - ----- -------------------------------- - -
在此示例代码中,AuthService 包含了四个方法:
- isAuthenticated():返回一个布尔值,表示用户是否已经通过身份验证。
- getToken():获取 JWT 令牌,如果没有,则从本地存储中获取。
- login():使用登录用户名和密码来获取 JWT 令牌,并将其存储在本地存储中。
- logout():移除本地存储中的 JWT 令牌,并将用户重定向到登录页面。
在示例中使用了两个第三方库,一个是 Angular 官方提供的 @auth0/angular-jwt 库,包含了许多方便的方法来使用 JWT 身份验证。另一个是 jsonwebtoken 库,它支持 JWT 的创建和解码。
步骤 3:在 HTTP 请求中添加 JWT 令牌
使用 JWT 进行身份验证的第一步是在每个 HTTP 请求中将 JWT 令牌添加到请求头中。在示例中,我们可以使用 Angular 的拦截器来实现这个操作。
首先,在 app.module.ts 中导入 HttpClientModule:
------ - ------------- - ---- ---------------------------- ------ - -------- - ---- ---------------- ------ - ---------------- - ---- ----------------------- ------ - ---------------- - ---- ----------------------- ------ - ------------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ------ - -------------- - ---- -------------------------- ----------- ------------- - ------------- -------------- -------------- -- -------- - -------------- ----------------- ---------------- -- ---------- --- ---------- -------------- -- ------ ----- --------- - -
然后,创建 AuthInterceptor,在 HTTP 请求中添加 JWT 令牌:
------ - ---------- - ---- ---------------- ------ - ---------------- ------------ ----------- - ---- ----------------------- ------ - ----------- - ---- ----------------- ------------- ------ ----- --------------- ---------- --------------- - ------------------- ------------ ------------ -- -------------- ----------------- ----- ------------ - ----- ----- - ---------------------------- ----- ------- - ----------- -------- -------------------------------- ------- ---------- --- ------ --------------------- - -
在将请求发送到服务器之前,AuthInterceptor 拦截 HTTP 请求并将 JWT 令牌添加到请求的 Authorization 头部。在请求头中是包含了 Bearer 关键字和 JWT 令牌,形如 “Bearer eyJhbGciOiJIUzUxMiIs...") 。
在 app.module.ts 中提供 AuthInterceptor:
------ - ------------- - ---- ---------------------------- ------ - -------- - ---- ---------------- ------ - ----------------- ----------------- - ---- ----------------------- ------ - ---------------- - ---- ----------------------- ------ - ------------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ------ - -------------- - ---- -------------------------- ------ - --------------- - ---- --------------------- ----------- ------------- - ------------- -------------- -------------- -- -------- - -------------- ----------------- ---------------- -- ---------- - - -------- ------------------ --------- ---------------- ------ ---- - -- ---------- -------------- -- ------ ----- --------- - -
步骤 4:解码 JWT 令牌
Authentication Service 还会解码 JWT 令牌中包含的信息以便在应用程序中使用。示例中的 getUsername() 方法简单地解码令牌并返回其中包含的用户名。
------ - ---------- - ---- ---------------- ------ - ---------------- - ---- --------------------- ------------- ----------- ------ -- ------ ----- ----------- - ------- ---------- ---------------- - --- ------------------- ------------- -- ------ ------------------ ------- - ----- ----- - ------------------------------------- ------ -------------------------------------- - ------ -------------- ------ - ----- ----- - ------------------------------------- ----- ------------ - ---------------------------------- ------ ---------------------- - -
使用以上步骤,您就可以轻松地在 Angular 应用程序中使用 JWT 身份验证了!
总结
JWT 身份验证是一种安全的、简单的身份验证方法,为 Angular 应用程序提供了安全身份验证功能。在实际开发中,您可以使用 @auth0/angular-jwt 库和 jsonwebtoken 库来轻松地实现 JWT 身份验证。通过使用拦截器和解码 JWT 令牌,您可以在应用程序中方便地使用 JWT 身份验证。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/645f681b968c7c53b016e5b6