Question

我在后端的Express服务器上有通行证策略。我已经设置了所有护照策略和身份验证。现在，我需要保护一些路线。无论用户是否登录，我都在使用redux来存储状态。

我尝试根据此tutorial创建专用路由。但是它陷入了无限循环（组件的无限渲染）。

以下代码成功连接到redux存储，调度了一个操作，后端也正常工作。

但是请建议我为什么会陷入无限循环。

我的保护功能如下：

const login = {
  type: "Login"
};
const logout = {
  type: "Logout"
};
const AUTH =
  process.env.NODE_ENV === "production"
    ? "https://birdiez.herokuapp.com/auth/check"
    : "http://localhost:3090/auth/check";

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props => {
      console.log("calling api");
      fetch(AUTH)
        .then(response => {
          return response.json();
        })
        .then(data => {
          console.log("Promise resolved:", data);
          data.msg === "OK" ? store.dispatch(login) : store.dispatch(login);
        });
      const { status } = store.getState();
      return status === true ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{
            pathname: "/",
            state: { from: props.location }
          }}
        />
      );
    }}
  />
);
export default PrivateRoute;

我的App.js看起来像：

class App extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <PrivateRoute path="/dash" component={Dash} />
          <Route exact path="*" component={Home} />
        </Switch>
      </Router>
    );
  }
}

react-redux应用程序中受保护的路由，React路由器未按预期运行

0 个答案: