在现代应用程序中，安全性往往是至关重要的。JWT (JSON Web Token) 是一种常见的身份验证策略，其在 Web 应用程序中的使用也越来越广泛。Angular 是一个流行的前端框架，可以轻松地在应用程序中集成 JWT 认证。
在本文中，我们将探讨如何在 Angular 项目中使用 JWT 认证。我们将讨论 JWT 的原理、如何将其集成到 Angular 项目中以及如何使用它来保护我们的应用程序。
JWT 的原理
JWT 是一个开放标准 (RFC 7519)，它定义了一种紧凑的、自包含的方式，用于在各方之间作为 JSON 对象安全地传输信息。JWT 通常由三部分组成，即：头部、载荷和签名。头部和载荷都是基于 JSON 的，签名是通过使用密钥和一些哈希算法计算得出的。
头部包含有关所使用算法的信息。载荷包含一些关于用户、访问权限和其他有用信息的称为声明的键值对。签名可以验证 JWT 是否有效，在传输过程中是否被篡改。使用 JWT 时，你可以将数据存储在其中，例如身份验证信息、访问令牌等信息。
在 Angular 项目中集成 JWT 认证
在 Angular 项目中使用 JWT 分为以下几个步骤：
1. 安装 JwtInterceptor
可以使用 Angular 官方提供的 @auth0/angular-jwt包，该包包含一个可用于拦截 http 请求的 JwtInterceptor。
首先，通过 npm 安装 @auth0/angular-jwt：
npm install @auth0/angular-jwt
2. 创建一个 Interceptor
创建名为 JwtInterceptor 的新拦截器。在此拦截器中，我们将检查当前用户是否已登录，并且将其 JWT 添加到每个 HTTP 请求的头部。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------------------ ------------ ------------ --------- - ---- -----------------------
------ - ---------------- - ---- ---------------------
------ - ---------- - ---- -------
-------------
------ ----- -------------- ---------- --------------- -
------------------ ----------------- ----- ------------- -------------------------- -
----- ----- - ------------------------------ --- ------------ -- -----
-- ------- -
----- ------ - ---------------
-------- ------------------------------------ ------- - - ------ --- ----- --- ---- ---
---
------ --------------------
- ---- -
------ ---------------------
-
-
-3. 注册 Interceptor
在 app.module.ts 文件中，注册 JwtInterceptor：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------- ----------------- - ---- -----------------------
------ - -------------- - ---- --------------------
-----------
-------- - -------------- ---------------- --
------------- - ------------ --
---------- -
- -------- ------------------ --------- --------------- ------ ---- -
--
---------- - ------------ -
--
------ ----- --------- - -4. 将 token 保存到本地存储中
要将 token 保存到本地存储中，可以使用以下代码：
login(username: string, password: string) {
return this.http.post<any>('http://localhost:3000/login', { username: username, password: password })
.pipe(map(response => {
const token = response.token;
localStorage.setItem('token', token); //将 token 保存到 localStorage 中
return true;
}));
}5. 从本地存储中删除 token
要从本地存储中删除 token，可以使用以下代码：
logout() {
localStorage.removeItem('token'); //从 localStorage 中删除 token
}使用 JWT 保护应用程序
使用 JWT 可以轻松地保护 Angular 应用程序。可以将它嵌入到路由守卫或身份验证服务中，以确保用户访问受保护的视图或功能时必须进行身份验证。
下面是一个简单的示例，演示如何在路由守卫中使用 JWT：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------- ------------ ----------------------- ------------------- - ---- ------------------
------ - ---------------- - ---- ---------------------
------------- ----------- ------ --
------ ----- --------- ---------- ----------- -
------------
------- ------- -------
------- ---------- ----------------
- - -
------------------ ----------------------- ------ -------------------- -
----- ----- - ------------------------------
-- ------ -- -------------------------------------- - -- -- ----- --------
------ -----
-
-------------------------------- - ------------ - ---------- --------- ----
------ ------
-
-在上面的示例中，AuthGuard 是一个可注入的 AuthGuard 服务，在路由定义中使用 canActivate 方法。
结论
JWT 是一种安全、紧凑且自包含的身份验证策略，在 Web 应用程序中的使用越来越广泛。使用 @auth0/angular-jwt 包，可以轻松地将 JWT 集成到 Angular 项目中，并使用路由守卫等方式来保护我们的应用程序免受未经授权的访问。
上面的示例代码只是一个概念性的示例，实际使用中应该结合实际业务需求进行实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6714cf55ad1e889fe215e593