如何加载身份验证？

Question

我试图仅在有人登录时显示 signedInLinks。但是，我似乎无法这样做，因为从未加载过 firebase 身份验证，因此不会显示任何链接。我怎样才能获得身份验证加载？我的代码不正确吗？ 我在这上面花了好几个小时。任何帮助将不胜感激。

import { Link } from 'react-router-dom';
import SignedInLinks from './SignedInLinks';
import SignedOutLinks from './SignedOutLinks';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom';
import "materialize-css/dist/css/materialize.min.css"
import M from  'materialize-css/dist/js/materialize.min.js';
import { isLoaded } from 'react-redux-firebase'




export class Navbar extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            authIsLoaded : isLoaded(props.auth),
            links : props.auth.uid ? <SignedInLinks /> : <SignedOutLinks />
        }; 
    }




    componentDidMount() {
        const M=window.M;
        document.addEventListener('DOMContentLoaded', function() {
            var elems = document.querySelectorAll('.sidenav');
            var instances = M.Sidenav.init(elems, {});
          });
    }

    render () {
        console.log(this.authIsLoaded)
        return (
            <div>  
            <nav className="nav-wrapper blue darken-4">
                <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"></link>

                <div class='container'>
                <a href="/" className='brand-logo'>DSHS</a>
                <a href="/" className="sidenav-trigger" data-target="mobile-links">
                    <i className="material-icons">menu</i>
                </a>
                    <ul className="right hide-on-med-and-down">
                        <SignedInLinks />

                    </ul>
                </div>
            </nav>
            <ul className="sidenav" id="mobile-links">
                {this.state.authIsLoaded && this.state.links}
            </ul>
            </div>

        );

    }

}




const mapStateToProps = (state) => {
    return {
        auth: state.firebase.auth
    }
}
export default connect(mapStateToProps)(Navbar);```

Answer 1

我无法理解究竟是什么问题，但我想这就是你真正要问的：

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Menu, Container, Button } from 'semantic-ui-react'
import { NavLink, Link, withRouter } from 'react-router-dom'
import SignedOutMenu from '../Menus/SignedOutMenu'
import SignedInMenu from '../Menus/SignedInMenu'
import { openModal } from '../../modals/modalActions'
import { logout } from '../../auth/authActions'
import { withFirebase } from 'react-redux-firebase'
// import {} from 'redux-firestore';

const actions = {
  openModal,
  logout
}

const mapStateToProps = (state) => ({
  auth: state.firebase.auth,
})

class Navbar extends Component {

  handleSignIn = () => {
    this.props.openModal('LoginModal')
  }

  handleRegister = () => {
    this.props.openModal('RegisterModal')
  }

  handleSignOut = () => {
    // this.props.logout();
    this.props.firebase.logout();     //logout function is in firebase therefore withFirebase HOC is used to get firebase instance 
    this.props.history.push('/');
  }

  render() {
    const { auth, profile } = this.props;
    const authenticated = auth.isLoaded && !auth.isEmpty;  // this is how you can check that user is signed in or not
    return (
      <Menu inverted fixed="top">
        <Container>
          <Menu.Item as={NavLink} to="/" exact header>
            <img src="/assets/logo.png" />
            Organize Events
          </Menu.Item>
          <Menu.Item exact name="Events" as={NavLink} to="/events" />
          {authenticated &&
            <>
              <Menu.Item name="People" as={NavLink} to="/people" />
              <Menu.Item>
                <Button as={Link} to="/createEvent" floated="right" positive inverted content="Create Event" />
              </Menu.Item>
            </>
          }
          {authenticated ? <SignedInMenu signOut={this.handleSignOut} profile={profile} /> : <SignedOutMenu signIn={this.handleSignIn} register={this.handleRegister} />}
        </Container>
      </Menu>
    )
  }
}

export default withRouter(withFirebase(connect(mapStateToProps, actions)(Navbar)));