在if块中反应不渲染组件

Posted 2021-04-17

我正在尝试使用firebase创建受保护的路由组件，我有以下设置

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;

我的路线设置如下，如果路线应该是私人的，我可以通过

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} />;

与此同时，firebase调用中的console.log输出为null

答案

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} />;
  }
}