如何在 React 应用程序上使用 JWT 添加身份验证？

Posted 2023-03-10

【中文标题】如何在 React 应用程序上使用 JWT 添加身份验证？

【英文标题】：How to add authentication using JWT on a React app?

【发布时间】：2018-08-30 09:17:47

【问题描述】：

我正在使用 React 开发一个 Web 应用程序。我正在使用 React 路由器。我想添加通过身份验证访问某些受保护页面的功能。我有一个运行 Express 的后端服务器。我一直在寻找信息来实现它，但它仍然让我感到困惑。

我在this page 上寻找重定向。在此页面上，模拟了一个伪造的身份验证系统来解释重定向系统。我想更换它。为了解决这个问题，我已经阅读了有关 JWT 的信息，但我并不真正了解如何使用它...

我可以为此提供一些提示吗？我想在我的快递服务器上有一个像 /login 这样的端点，如果这样做，当登录名和密码正确时，它将提供一个令牌。我想使用这个令牌来处理对受限页面的访问。

谢谢！

【问题讨论】：

有一些关于在 React 应用中使用 JWT 的教程。就像这个甚至有一个快速后端部分的代码：medium.com/@rajaraodv/… - 本质上，当他们登录时，你会为他们提供一个 JWT（存储在浏览器中），然后对于你想要保护的路由，你使用检查他们的请求是否具有该令牌（并且它是有效令牌）的中间件。所有这些的例子都可以在我上面链接的教程和其他教程中找到。

我希望检查 Firebase？我使用它并且喜欢它...... :)

我已按照您的教程获取了一个端点，该端点在发送正确的凭据时给了我令牌。我现在如何使用或与 React 一起使用（我没有使用 redux）？ Firebase 看起来很酷，但我想自己实现

【参考方案1】：

您可以在 router.onEnter 属性中添加 onEnter 允许您检查请求的路由并根据您定义的参数将用户发送到不同的路由。

你可以这样使用它。

function requireAuth(nextState, replace) 
  if (!loggedIn()) 
    replace(
      pathname: '/login'
    )
  


function routes() 
  return (
    <Route path="/" component=App>
      <Route path="login" component=Login />
      <Route path="logout" component=Logout />
      <Route path="checkout" component=Checkout onEnter=requireAuth />
    </Route>
  );

【参考方案2】：

我已设法通过此链接进行身份验证https://hptechblogs.com/using-json-web-token-react/ 和https://medium.com/@rajaraodv/securing-react-redux-apps-with-jwt-tokens-fcfe81356ea0 用于服务器端。

对于第一个链接，您必须更改一些行。当您实现handleFormSubmit() 时，不要忘记在提交按钮上使用onClick 调用它并删除“type=submit”。 在 AuthService 中，当出现错误时，不要忘记在登录时返回一个 Promise.Reject()。 通过这些更改，它对我有用！