npm 包 @tiangolo/angular-jwt 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，经常需要处理用户身份认证的问题。其中，JWT（JSON Web Token）作为一种轻量级的认证方式，逐渐被越来越多的应用所采用。而 @tiangolo/angular-jwt 正是一个方便快捷的 Angular 组件，用于处理 JWT 的生成和解析。

安装和引入 @tiangolo/angular-jwt

要使用 @tiangolo/angular-jwt，我们需要先将其安装到本地环境中。在终端中输入以下命令：

npm install @auth0/angular-jwt

安装完成后，我们需要将其引入到需要使用的组件中，例如：

import { JwtHelperService } from '@auth0/angular-jwt';

JwtHelperService 方法使用

接下来，我们就可以使用 JwtHelperService 中的方法来处理 JWT 了。

parseJwt(jwt: string)

将 JWT 字符串解析成 JSON 对象。

const jwtHelper = new JwtHelperService();
const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c';
const tokenObj = jwtHelper.parseJwt(token);
console.log(tokenObj); // { sub: '1234567890', name: 'John Doe', iat: 1516239022 }

getTokenExpirationDate(token: string): Date | null

获取 JWT 的过期时间。如果 JWT 中未设置过期时间，返回 null。

const jwtHelper = new JwtHelperService();
const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c';
const tokenExp = jwtHelper.getTokenExpirationDate(token);
console.log(tokenExp); // 2025-01-19T18:23:42.000Z

isTokenExpired(token: string, offsetSeconds?: number): boolean

检查 JWT 是否过期。如果过期返回 true，否则返回 false。

const jwtHelper = new JwtHelperService();
const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c';
const isExpired = jwtHelper.isTokenExpired(token);
console.log(isExpired); // false

在 Angular 应用中使用

通常情况下，我们需要在调用 API 时将获取到的 JWT 加入到请求头中进行认证。可以在 Angular 的 HttpInterceptor 中使用 JwtHelperService 对请求进行前置处理：

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

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

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

以上代码会将本地存储中的 JWT 赋值给 Authorization 请求头，如：

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

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

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

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

结语

通过上方示例，我们可以看到 @tiangolo/angular-jwt 的使用是相当简单和方便的。在实际开发中，我们只需要了解这个包提供的方法，就可以轻松地使用 JWT 进行前端身份认证。

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