React：如何根据状态代码 200 从登录页面重定向到 AppLayout 页面？

Question

大家好，感谢您花时间阅读本文。 我对此很陌生，我感谢您可能会考虑的任何帮助。
客户端坚持在我在 Index.html 中链接的 jQuery（出于安全原因）中自行进行身份验证。 身份验证成功后，jQuery 会响应一个包含 [object Object] 的警告窗口。
我被告知根据状态代码 200 从登录页面重定向到 AppLayout 页面，我在 react 文档上找不到任何关于此的信息，或者甚至可能。
我与服务器的交互是通过 Swagger API 进行的。 我正在将 create-react-app 与 react-router 和 axios 一起用于所有其他 API 请求。
有没有办法定位状态代码并根据该条件进行重定向？
否则，您能否建议仅使用 axios 的最安全的身份验证方法并摆脱 jQuery？
我知道这很遥远，但非常感谢任何建议/链接。

非常感谢！

Answer 1

这绝对是可能的。 最好的选择是使用 axios 在应用程序内执行身份验证。 实现细节将取决于你的 React-Router 版本。 假设 v4，您可以使用 history.push('/new-route') 方法将您导航到应用程序内的新路线。 或者，您可以使用执行类似功能的重定向组件。 请参阅此处的文档： https : //reacttraining.com/react-router/web/api/Redirect 。

使用重定向，它看起来像这样：

render() {
  if (this.state.userIsAuthed) {
    return <Redirect to='/app' />
  }
  return <LoginInternals />
}

如果您可以在应用程序中执行 POST，您将在 POST 成功处理程序中将 userIsAuthed 设置为 true。

如果您真的想在外部使用 jQuery 来实现，您可以将成功信息存储在 cookie 或本地存储中。 在您的反应登录路由中，在 componentWillMount 中，您可以检查 cookie 或本地存储以获取您的成功信息并相应地更新状态。

Answer 2

如果你使用 react-router 钩子

import {useHistory} from "react-router-dom"
const history = useHistory()
if(response.status === 200){
    history.push('/path')
  }