IT技术 - react路由和私有路由 - 吾爱随笔录

我试图通过检查我的快速服务器来阻止对私有路径的访问，如果用户在允许访问之前已登录，否则重定向到登录。

我创建了一个与服务器核对的私有路由函数。问题是，我不知道如何让它在决定路由到哪个组件之前等待响应（私人页面与登录）。

const isAuthed = () => {
  fetch('/api/checkLogin', {
    method: 'GET',
    credentials: 'include'
  })
  .then(response => {
    console.log(response.status == 200);
    return response.status == 200;
  });
}

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

这总是重定向到登录...

有任何想法吗？

编辑 1 以下是 PrivateRoute 的使用方式。

const Routing = (props) => (
  <div>
    <Switch>
      <Route exact path='/' component={Home} />
      <PrivateRoute exact path='/profile' component={Profile} />
      <PrivateRoute exact path='/auction_list' component={Auctions} />
    </Switch>
  </div>
)

有了react，似乎在调用路由组件时我必须返回一些东西。我不能异步调用 PrivateRoute 然后让异步调用返回更新。

编辑 2 我尝试使用 react-redux 来存储登录数据，因此我不必对服务器进行异步调用以进行身份验证。但是，刷新页面会清除所有 redux 存储，因此就像刷新后用户未登录一样，这非常笨拙。

我想把信息放在会话存储中。但是用户将无法一次注销所有机器。

我最终从每个私有组件的 componentWillMount ping 服务器。私人页面可能会闪烁几分之一秒，但这是我目前所能做的最好的……如果有更好的方法，请告诉我……一定有。