Question

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

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

＆＃13;

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

＆＃13;

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

有什么想法吗？

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

＆＃13;

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>
)

＆＃13;

使用react，似乎我必须在调用Routing组件时返回一些内容。我无法对PrivateRoute进行异步调用，然后让异步调用给出返回更新。

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

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

我最终从每个私有组件的componentWillMount ping服务器。私人页面可能会闪烁几秒钟，但这是我迄今为止所做的最好的...让我知道是否有更好的方法......必须有一个。

Answer 1

每次用户访问网站时，都不应通过服务器进行身份验证。

react-router的条件路由仅在可以同步检查条件时才有效。

当用户第一次成功通过身份验证时，会将指示身份验证状态的变量（如果需要，还有到期日期）存储到localStorage。

当用户再次访问网站时，您可以通过localStorage获取身份验证状态（这是同步操作）来重定向。

反应路由和私有路由

1 个答案: