时间戳

首页 > 解决方案 > 反应路由和私有路由

javascript - 反应路由和私有路由

问题描述

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

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

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

有了反应，似乎我在调用路由组件时必须返回一些东西。我无法对 PrivateRoute 进行异步调用，然后让该异步调用返回更新。

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

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

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

标签： javascriptreactjs

解决方案

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

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

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

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

推荐阅读