Question

我正在使用Firestore，并且有权访问状态，该状态将通知我用户是否通过身份验证。我正在将这些条件映射到道具，如果未通过身份验证，将使用react-router-dom的重定向将用户导航到登录页面。

但是，当我使用控制台日志登录身份验证状态时，我看到最初在加载此信息然后切换为true时它将显示为false。但是，当看到用户已通过身份验证时，我已经将他们重定向了。

我应该如何根据用户的身份验证来重定向用户？

export class PrimaryNavBar extends Component {

  render(){
    const { auth, location } = this.props;
    const authenticated = auth.isLoaded && !auth.isEmpty;

    return (
      <React.Fragment>
      {!authenticated ? <Redirect to="/"/> : null}
      <Navbar bg="primary" variant="dark">
        <Container>
          <Link to="/">
    ....

我在这里查看了其他答案，但它们对重定向没有真正帮助，如果未通过身份验证，则仅呈现null。

更新

我将代码重构为重定向，将在app.js文件中发生

新的问题是，每当我用户更改路由时，它都会重新检查auth，而auth最初是假的，最终返回登录屏幕。

class App extends Component {
  state = {
    isAuthenticated: this.props.isAuthenticated
  }

  render() {
    const logoutHandler = () => {
      this.props.firebase.logout();
    };
    const authenticated = this.props.auth.isLoaded && !this.props.auth.isEmpty;
    return (
      <Aux>
        {!authenticated ? <Redirect to="/" /> : null}
        <Route path="/" exact component={Login} />
        <Route path='/(.+)' render={() => (
          <React.Fragment>
            <PrimaryNavBar logout={logoutHandler} />
            <Switch>
              <Route path="/dashboard" exact component={Dashboard} />
              <Route path="/auctions" component={Auctions} />
              <Route path="/auctions/:id" component={AuctionItem} />
              <Route path="/auctions/create-auction" component={CreateAuction} />
              <Route path="/bidders/create-bidder" component={CreateBidder} />
              <Route path="/bidders/:id" component={Bidder} />
              <Route path="/bidders" component={Bidders} />
            </Switch>
          </React.Fragment>
        )} />
        <ReduxToastr position="bottom-right" />
      </Aux>
    );
  }

}
const mapStateToProps = state => {
  return {
    isAuthenticated: state.firebase.auth.uid,
    auth: state.firebase.auth
  };
};

const mapDisptachToProps = dispatch => {
  return {};
};


export default withRouter(withFirebase(
  connect(
    mapStateToProps,
    mapDisptachToProps
  )(App)
));

Answer 1

您可能应该等到auth.isLoaded为真？如果是这样，您可以

const { auth, location } = this.props;
if (!auth.isLoaded) return null

这将避免显示导航组件，直到加载身份验证信息。不过，您可能要考虑在父组件级别实现此检查（和重定向）。

反应-重定向用户未通过身份验证

更新

1 个答案: