如何在 json.stringify() 之后从本地存储中获取 object

Question

我目前正在使用 ReactJS 创建一个登录页面。 此页面使用具有“授权”function 的 API 确认输入的详细信息是否被授权使用 API。 为了处理 API 调用，我创建了一个 class，它对每个可能的 ZDB974238714CA8DE6434ACE 调用都有一个 function。 如果用户能够成功登录（如果授权 function 返回状态 200），他们将被重定向到“ProjectSelect”页面/组件。 从这个项目 Select 页面，用户将能够 select 从他们的项目列表中找到一个特定的项目。 现在，这就是问题所在。 我现在需要使用“ProjectSelect”组件中“Login”组件中的 API 实例。 我目前尝试执行此操作的方式涉及将其存储在本地存储中，如下所示：

登录.jsx：

import {API} from 'filepath';
const api = new API();

async function loginUser(email, password, appid) {
  return api.authorise(email, password, appid);
}

export default function Login() {
  const classes = useStyles();
  const [email, setEmail] = useState();
  const [password, setPassword] = useState();
  const [appid, setAppId] = useState();

  const handleSubmit = async e => {
    e.preventDefault();
    const response = await loginUser(
      email,
      password,
      appid
    );
    console.log(response);
    if (response.status === 200) {
      swal("Success", "Logged In", "success", {
        buttons: false,
        timer: 2000,
      })
      .then((value) => {
        localStorage.setItem('access_token', response.data.access_token);
        localStorage.setItem('api', JSON.stringify(api));

        window.location.href = "/bimpluslogin";
      });
    } else {
      swal("Failed", "Login Failed", "error");
    }
  }

项目选择.jsx：

const api = JSON.parse(localStorage.getItem('api'));
let allProjects = api.getAllProjects(); // Error occurs here 

我知道，如果您使用 JSON.stringify() 和 object，它只会采用键值，而当通过 JSON 解析回来时，它基本上无法使用。

我尝试过的：我尝试在 ProjectSelect 组件中创建一个新的 API 实例并将身份验证详细信息存储在本地存储中，但这会导致很多问题并且不允许我使用所有功能。 我将不胜感激有关如何从一个组件存储 object 然后在另一个组件中使用完全相同的 object 的任何建议。 提前致谢。