Angular 中如何实现 JWT 认证 - 教程

JSON Web Tokens (JWT) 是一种流行的跨域身份验证解决方案，它基于标准化的 JSON 格式并使用数字签名保证其可靠性。在 Angular 应用程序中使用 JWT 认证，为用户与服务器之间的通信提供了安全和有效的解决方案。

本教程将介绍在 Angular 应用程序中使用 JWT 认证的实现方法与示例代码，以及如何在应用程序中获得和存储 JWT。

获得和存储 JWT

在 Angular 应用程序中使用 JWT 认证，在创建用户登录表单时需要注意以下几点：

1. 用户提交表单时，需要将用户名和密码发送到服务器并获得 JWT。
2. 服务器应该使用存储在数据库中的用户信息来验证用户名和密码。
3. 如果用户名和密码有效，则服务器应该返回 JWT，否则返回错误信息。

在成功获得 JWT 后，需要在客户端中存储它，以便在向服务器发送请求时使用。可以使用 Angular 中的 localStorage 进行存储，如下所示：

localStorage.setItem('jwt', JSON.stringify({ token: 'your_token_here' }));

获取存储在客户端中的 JWT，可以使用以下代码：

const jwtData = localStorage.getItem('jwt');
const jwt = JSON.parse(jwtData).token;

在 Angular 中实现 JWT 认证

使用 Angular 实现 JWT 认证需要进行以下步骤：

1. 创建一个服务来发送和接收 JWT。
2. 在用户登录后，从服务器获得 JWT 并存储。
3. 在发送请求时，将 JWT 添加到请求头中。

创建 JWT 服务

创建一个称为 JwtService 的服务，在其中包含以下函数：

• getJWT(): 获取存储在客户端中的 JWT。
• saveJWT(token: string): 将 JWT 存储在客户端中。
• deleteJWT(): 删除存储在客户端中的 JWT。

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

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

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

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

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

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

发送和接收 JWT

在使用 HttpClient 发送请求时，请确保将 JWT 添加到请求头中。可以在每个请求中手动添加标头，也可以使用拦截器在每个请求中自动添加标头。

以下代码演示了如何手动将 JWT 添加到请求头中：

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

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

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

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

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

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

在上述代码中，AuthenticationService 是一个用于处理登录和注销逻辑的服务。login 函数将向服务器发送用户名和密码，如果认证成功，则将 JWT 存储在客户端中。getUserInformation 函数将从服务器获取用户身份信息，该函数将自动将 JWT 添加到请求中。

结论

本教程介绍了如何在 Angular 应用程序中使用 JWT 认证，并提供了示例代码说明实现细节。使用 JWT 认证可以为您的应用程序提供更强大、更可靠的身份验证解决方案，同时保证用户与服务器之间的数据通信安全。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6770faba6d66e0f9aacacbc3