Question

我正在使用React开发一个Web应用程序。我正在使用React Router。我想通过身份验证添加访问某些受保护页面的功能。我有一个运行Express的后端服务器。我已经找到了实现这一点的信息，但它仍然让我感到困惑。我在这个页面上寻找重定向[https://reacttraining.com/react-router/web/example/auth-workflow]。在此页面上，模拟了一个虚假的身份验证系统来解释重定向系统。我想替换它。我已经阅读了有关JWT的内容，但是我真的不明白如何使用它... 我可以提供一些提示吗？我希望在我的快速服务器上有一个类似/ login的端点，如果这样做，它将在登录和密码正确时提供令牌。我想使用此令牌来处理对受限页面的访问。

谢谢！

Answer 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>
  );
}

Answer 2

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

对于第一个链接，您必须更改一些行。当你实现handleFormSubmit（）时，不要忘记使用提交按钮上的onClick调用它并删除＆＃34; type = submit＆＃34;。在AuthService中，当出现错误时，不要忘记在登录时返回Promise.Reject（）。有了这些改变，它对我有用了！

为React app添加身份验证

2 个答案: