javascript - 如果后端服务器已关闭，那么如何使用 Axios 在 Reactjs 中进行处理

Question

目前我正在使用 Axios 从后端获取数据，如果后端已关闭，那么如何处理它。现在如果用户在没有登录的情况下直接访问APP中的某个页面，它会显示给他空白数据的页面。由于后端已关闭，因此它也不会重定向到 403 页面。

当后端关闭时，用户应该被重定向到其他页面，如果他直接尝试访问它，他应该无法看到任何页面。

我正在使用 Redux 进行状态管理 React-Router 用于路由 Axios 以获取数据

标签： javascriptreactjsreact-reduxreact-routeraxios

Answer 1

您可以使用Redirect和 privateRoute。
PriveRoute 组件：

function PrivateRoute({ component: Component, ...props }) {
  const isAuthenticated = true or false;
  return (
    <Route
      render={props =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: props.location }
            }}
          />
        )
      }
      {...props}
    />
  );
}

export default PrivateRoute;

并将其用于您的BrowserRouter：

<PrivateRoute
    exact
    path='/home'
    component={<Home />}
/>

您可以检查您的后端是否已启动并根据它在 redux 中设置状态，并PrivateRoute检查此状态，如果它未启动，则重定向到Component您想要的login.