使用PrivateRoute反应异步Logincheck

Question

我想使用异步LoginCheck在React中创建PrivateRoute。我已经试过了：

class App extends React.Component {
constructor(props) {
super(props);
this.state = {
loggedIn: false
}
}

componentDidMount() {
//ASYNC FUNCTION
setTimeout(() => {
this.setState({loggedIn: true});
}, 1000)
}

render() {

console.log("RENDERED", this.state.loggedIn);

const PrivateRoute = ({component: Component, ...rest}) => (
      <Route {...rest} render={(props) => (
         this.state.loggedIn === true
           ? <Component {...props} />
           : <Redirect to="/login" />
      )}/>
    )

return(
<Router>
<Switch>
<Route path="/" exact component={Home} />
<PrivateRoute path="/private" component={PrivatePage} />
</Switch>
</Router>
)
}
}

但是那不起作用。在控制台中，它显示第一个“ RENDERED false”，第二个显示“ RENDERED true”。因此它使用正确的参数呈现，但是在const PrivateRoute中，他将重定向到登录页面，因此loginIn为false。为什么？我该怎么办？

Answer 1

您可以创建一个函数checkAuth（）来按如下所述分隔验证

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Redirect,
  Route,
} from "react-router-dom";
import Home from "./Home";
import PrivatePage from "./Private";



export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loggedIn: true
    }
  }

  componentDidMount() {
    //ASYNC FUNCTION
    setTimeout(() => {
      this.setState({ loggedIn: false });
    }, 1000)
  }

  render() {

    console.log("RENDERED", this.state.loggedIn);

    const checkAuth = () => {
      try {
        // To be replaced with your condition
        if (this.state.loggedIn === true) {
          return true;
        }

      } catch (e) {
        return false;
      }
      return false;
    }

    const PrivateRoute = ({ component: Component, ...rest }) => (
      <Route {...rest} render={props => (
        checkAuth() ? (
          <Component {...props} />
        ) : (
            <Redirect to={{ pathname: '/' }} />
          )
      )} />
    )

    return (
      <Router>
        <Switch>
          <Route path="/" exact component={Home} />
          <PrivateRoute path="/private" component={PrivatePage} />
        </Switch>
      </Router>
    )
  }
}

以loggedIn的身份访问URL“ http://localhost/private”：是的，此路由已授权，但是在0.2秒后，loginIn的状态将更新为false，并将受保护的路由重定向到主页。