重定向无法在响应中正常工作

Question

我想要什么：

我有一条专用路由（/ dashboard），仅当用户登录时才可以访问。因此，我的条件是仅当用户经过身份验证并且加载为false（已完成）时才加载Dashboard。如果用户未通过身份验证，请将其重定向到登录页面。

问题

如果我从导航栏中单击“仪表板链接”，则我的代码工作正常。如果我登录，它将重定向到仪表板，但是当我尝试通过直接键入localhost：3000 / dashboard手动进入仪表板时，问题就出现了。 即使刷新仪表板，它也会将我重定向到登录页面。

原因

这个问题的原因是两个状态（身份验证和加载）都在Redux中，所以如果我直接访问仪表板，则Redux需要一些时间来登录用户并更改状态，因此我将返回到主页，即使我已登录。

这会花费一些时间，因为我在本地存储中有一个令牌，并且通过向后端发送发布请求以确认令牌是否有效来进行检查，在“有效”令牌上，我使用户进入还原状态。

代码

在 App.js

中

<Switch>
          <Route exact path="/register" component={Register} />
          <Route exact path="/login" component={Login} />
          <PrivateRoute exact path="/dashboard" component={
</Switch>

PrivateRoute.js

const PrivateRoute = props => {
  let route = <Route {...props} component={props.component} />;

  if (!props.isLoading && !props.isAuthenticated) {
    route = <Redirect to="/login" />;
  }
  return <React.Fragment>{route}</React.Fragment>;
}

您可以看到，如果用户手动转到/ dashboard，则该条件会立即在“专用路由”中检查，因为该用户会重定向到首页。

我该如何解决这个问题？

已解决的问题： 由于isLoading始终未定义，因此我有一些错字。修复该问题，效果很好

Answer 1

您可以通过将Web服务器重定向到React SPA的登录页面来解决此问题。它可以是<div className="dayDiv"> <p className="text day">TODAY</p> <div className="eventsDiv"> {this.state.events && this.state.events.map(data => { if (date.getUTCDate() === data.day && date.getMonth() === data.month) { return <Event data={data} />; } })} </div> </div>; <div className="dayDiv"> <p className="text day">TOMORROW</p> <div className="eventsDiv"> {this.state.events && this.state.events.map(data => { if ( date.getUTCDate() + 1 === data.day && date.getMonth() === data.month ) { return <Event data={data} />; } })} </div> </div>; ，但通常是/* poormans sub for Arrays */ extension Array where Element: Equatable { static func -=(lhs: inout Array, rhs: Array) { rhs.forEach { if let indexOfhit = lhs.firstIndex(of: $0) { lhs.remove(at: indexOfhit) } } } static func -(lhs: Array, rhs: Array) -> Array { return lhs.filter { return !rhs.contains($0) } } } 。此时页面被重新加载，React应用程序开始重新执行，React代码确定（检查是否存在cookie，而不查看刚创建的Redux存储）用户未登录并在内部重定向从“ /”到“ / login /”。

Web服务器将不会意识到此内部重定向，它在SPA内部。但是，如果用户在导航栏上输入URL并按Enter（据我所知是问题），则Web服务器将知道。

如果使用webpack-dev-server，则可以通过将historyApiFallback设置为/login/并指定重定向URL来实现SPA所需的重定向类型。