Question

我使用下面的图片解释我的问题。

1.第一个用户通过云[1]登录我的应用程序，该应用程序托管在服务器[3]上。在此期间，用户使用Identity Provider [1]进行身份验证。身份提供商将JWT发送到云服务器[1]。

然后Cloud Sercer [1]将请求发送到我的应用服务器[1] 随着JWT作为请求标题和Application Server [3]然后服务索引页面回到用户。

现在我的问题是我需要在我的ReactJs应用程序中获取JWT才能获得该JWT中的用户详细信息。由于React是客户端框架，我无法使用React处理请求。

所以我的问题是如何从ReactJs那里得到这个JWT？

Answer 1

是的，ReactJS它自己无法处理这个因为它的前端。

您的应用程序需要一个单独的后端（即BFF - 前端后端）。您可以使用nodejs服务器来包装前端，并使用中间件来捕获JWT请求并提取用户详细信息。然后在服务于从nodejs服务器反应前端时，您可以将信息绑定到它。

绑定时，我更喜欢将数据绑定到javascript变量或函数。

在您的反应索引页面中，您可以拥有全局功能。

<body>
  <script type="application/javascript">
    function getUserDetails(){
      return JSON.parse("!!!!USER_DATA!!!!");
    }
  </script>
  <div id="app"></div>
</body>

你可以替换＆＃39; !!!! USER_DATA !!!!＆＃39;从BFF渲染反应页面时，带有用户详细信息的有效json的部分。像这样，

let userDetailJsonString = JSON.stringify(dataFromJWT);
res.send(renderingIndexPage.replace(/\!\!\!\!USER_DATA\!\!\!\!/g, userDetailJsonString.replace(/"/g, "\\\"")));

你可以用不同的方式做到这一点，你可以尝试不同的方式。

如何处理ReactJs中的请求？

1 个答案: