Question

我在我们的 React 项目中有这个任务，需要使用 jwt 加密状态内的对象。当我使用 .sign() 方法并包括 RS256 算法时，它会抛出一个错误，指出“无法读取 null 的属性 '2'”。

这是我正在做的事情的示例。

import { useState } from "react";
import "./styles.css";

import jwt from "jsonwebtoken";

import configData from "./conf.json";

export default function App() {
  const [state] = useState({
    name: "John",
    age: 22,
    sex: "Male"
  });

  const stateHashed = jwt.sign(state, configData.SECRET_KEY, {
    algorithm: "RS256"
  });

  console.log(configData.SECRET_KEY);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <h1>Hashed key</h1>
      <h3>{stateHashed}</h3>
    </div>
  );
}

这里是秘钥的conf.json文件

{
  "SECRET_KEY": "exDj"
}

感谢任何可以提供帮助的人。

Answer 1

我解决了我的问题。我将分享给与我相同案例的任何人，以便了解我的解决方案。

我在 react 项目的根文件夹中创建了一个 private.key 文件，并在文件中包含了 RSA Generated 字符串。为了得到private.key文件，我确实在App中定义了nodeJs的fs模块

import { useState } from "react";
import "./styles.css";

import jwt from "jsonwebtoken";
import jwt_decode from "jwt-decode";

//Added fs library
const fs = require('fs');

export default function App() {
  const [state] = useState({
    name: "John",
    age: 22,
    sex: "Male"
  });

  // private.key file in the root foldef 
  // RSA Key Generator 
  const privateKey = fs.readFileSync('private.key');

  //Hash the data using jwt
  const stateHashed = jwt.sign(state, privateKey, {
    algorithm: "RS256"
  });

  const stateHashedDecoded = jwt_decode(stateHashed);

  console.log(jwt_decode(stateHashed))

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <h1>Hashed key</h1>
      <h3>{stateHashed}</h3>

      <h1>String inside the hash</h1>
      <h3>{stateHashedDecoded.name + " " + stateHashedDecoded.age + " " + stateHashedDecoded.sex}</h3>
    </div>
  );
}

获取生成的 RSA。您可以查看此链接。

http://travistidwell.com/jsencrypt/demo/

对于任何想要查看简单项目的人

https://codesandbox.io/live/hk2sxv3

react中的jsonwebtoken出现错误“无法读取null的属性'2'”

1 个答案: