如何在反应中解码 JWT 令牌 - Javascript

在许多 Web 应用程序中，JWT（JSON Web Token）令牌已成为身份验证和授权的常见方式。然而，在客户端上对 JWT 令牌进行解码可能会出现一些挑战，因为所有信息都以 Base64 编码的形式存储，并且需要进行解析和处理。在本教程中，我们将学习如何在 Javascript 中解码 JWT 令牌。

JWT 令牌简介

JWT 令牌是由三个部分组成的字符串，用点分隔。

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

这三部分的含义如下：

1. Header： 包含令牌的元数据，例如加密算法和类型。
2. Payload： 包含有关 JWT 持有人的声明（Claims），例如身份验证和授权信息。
3. Signature： 包含使用私钥签名的 Headers 和 Payload 的哈希值，以确保令牌未被篡改。

安装 jwt-decode 库

为了解码 JWT 令牌，我们需要使用 jwt-decode 库。该库可用于将 JWT 令牌的 Header 和 Payload 部分解码为 Javascript 对象。

安装 jwt-decode 库的方法非常简单。我们只需要在终端中运行以下命令：

npm install jwt-decode --save

在 React 中解码 JWT 令牌

在 React 中解码 JWT 令牌非常简单。我们只需要遵循以下步骤：

1. 导入 jwt-decode 库。

import jwt_decode from 'jwt-decode';

2. 在组件内部创建一个状态变量来保存解码后的令牌信息。

export default function MyComponent() {
  const [decodedToken, setDecodedToken] = useState({});
  ...
}

3. 当令牌在组件中可用时，使用 jwt-decode 库将其解码。

const token = localStorage.getItem('token');
const decoded = jwt_decode(token);
setDecodedToken(decoded);

完整代码示例：

import React, { useState, useEffect } from 'react';
import jwt_decode from 'jwt-decode';

export default function MyComponent() {
  const [decodedToken, setDecodedToken] = useState({});

  useEffect(() => {
    const token = localStorage.getItem('token');
  
    if (token) {
      const decoded = jwt_decode(token);
      setDecodedToken(decoded);
    }
  }, []);

  return (
    <div>
      <p>Username: {decodedToken.username}</p>
      <p>Role: {decodedToken.role}</p>
    </div>
  );
}

以上代码将在组件挂载后自动从 localStorage 中获取令牌并将其解码为对象。

总结

在本教程中，我们学习了如何在反应中解码 JWT 令牌。为了实现这一目标，我们使用了 jwt-decode 库并按照特定的步骤进行了实现。现在，我们已经解码了令牌，并且可以在 React 组件中使用其 Payload 部分中包含的声明。