javascript - 在 if block 中 react 不渲染组件

Question

我正在尝试使用 firebase 创建一个 protected 路由组件，我有以下设置

import React, { Component } from 'react';
import { Route, Redirect } from 'react-router-dom';

import firebase from 'firebase';

firebase.initializeApp({
    apiKey: 'xxxxxx',
    authDomain: 'xxxxxx',
    databaseURL: 'xxxxxx',
    projectId: 'xxxxxx',
    storageBucket: 'xxxxxx',
    messagingSenderId: 'xxxxxx',
});

class ProtectedRoute extends Component {
    componentWillMount() {}

    render() {
        const { component: Component, layout: Layout, redirect, auth: isAuthorized, ...rest } = this.props;

        if (!this.props.hasOwnProperty('auth') && !this.props.hasOwnProperty('layout')) {
            return <Route {...this.props} />;
        }

        const template = Layout ? (
            <Layout>
                <Component />
            </Layout>
        ) : (
            <Component />
        );

        if (!this.props.hasOwnProperty('auth') && this.props.hasOwnProperty('layout')) {
            return <Route {...rest} component={() => template} />;
        }

        if (isAuthorized) {
            firebase.auth().onAuthStateChanged(user => {
                if(!user) {
                    console.log(user)
                    return redirect ? <Redirect to={{ pathname: redirect }} /> : <Route render={() => <div>Unauthorized</div>} />;
                }
            })
        }

        return <Route {...rest} render={() => template} />;
    }
}

export default ProtectedRoute;

我的路由是这样设置的，它允许我传入路由是否应该是私有(private)的

import Route from './containers/ProtectedRoute';
 <Switch>
    <Route exact path="/" component={LandingPage} />
    <Route path="/private" auth={true} component={PrivatePage} />
    <Redirect to="/" />
  </Switch>

我希望发生的是，在访问 /private 时我应该触发 firebase.auth().onAuthStateChanged打电话和返回null然后我应该触发重定向逻辑。

相反，我仍在点击 return <Route {...rest} render={() => template} />;

与此同时 console.log在 firebase 调用中输出 null

Answer 1

firebase.auth().onAuthStateChanged 是异步的，因此您的 if (isAuthorized) { ... } 中的 return 语句永远不会运行。

您可以改为将此逻辑放入 componentDidMount 并将最新更改的结果存储在您的组件 state 中并使用它。

示例

class ProtectedRoute extends Component {
  auth = firebase.auth();
  state = { user: this.auth.currentUser };

  componentDidMount() {
    this.unsubscribe = this.auth.onAuthStateChanged(user => {
      this.setState({ user });
    });
  }

  componentWillUnmount() {
    this.unsubscribe();
  }

  render() {
    const {
      component: Component,
      layout: Layout,
      redirect,
      auth: isAuthorized,
      ...rest
    } = this.props;
    const { user } = this.state;

    if (
      !this.props.hasOwnProperty("auth") &&
      !this.props.hasOwnProperty("layout")
    ) {
      return <Route {...this.props} />;
    }

    const template = Layout ? (
      <Layout>
        <Component />
      </Layout>
    ) : (
      <Component />
    );

    if (
      !this.props.hasOwnProperty("auth") &&
      this.props.hasOwnProperty("layout")
    ) {
      return <Route {...rest} component={() => template} />;
    }

    if (isAuthorized && !user) {
      return redirect ? (
        <Redirect to={{ pathname: redirect }} />
      ) : (
        <Route render={() => <div>Unauthorized</div>} />
      );
    }

    return <Route {...rest} render={() => template} />;
  }
}