Блог

App.js

 class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      user: {},
    }
  }

  render() {

    return (
      <BrowserRouter>
        <div style={{background:'floralwhite'}}>
          <Route path='/' component={Home} />
          <Route path='/calendar' component={Calendar} />
          <Route path='/config' component={UserConfig} />
          <Route path='/login' component={Login} />
        </div>
      </BrowserRouter>

    );
  }
}
 

Я использую react-router-dom Route для создания разных путей в своем веб-приложении. И я использую эти пути в моем navbar , который отображается следующим образом:

   render() {
      return(
        <div className="navbar">
          <div className="logo-container">
            <img src={Logo}></img>
          </div>

          <div className="left-link-container">
          </div>

          <div className="right-link-container">
            <span style={{color:'white'}} onClick={this.handleLogout}>Sign Out</span>
            <Link style={{ textDecoration: 'none' }} to="/config"><span style={{color:'white', marginRight:'2em'}}>Configuration</span></Link>
            <Link style={{ textDecoration: 'none' }} to="/calendar"><span style={{color:'white', marginRight:'2em'}}>Calendar</span></Link>
          </div>
        </div>
      );
    } 
 

Итак, щелчок по календарю приведет меня к /calendar пути. Проблем нет, и все работает так, как задумано. Однако, когда я обновляю /calendar страницу, она каким-то образом выходит из моей аутентификации firebase.

Моя аутентификация происходит в моем Home компоненте следующим образом:

 class Home extends Component {

  constructor(props) {
    super(props);
    this.state = {
      user: {},
    }
  }

  componentDidMount() {
    this.authListener();
  }

  authListener() {
    fire.auth().onAuthStateChanged((user) => {
      console.log(user);
      if (user) {
        this.setState({ user });
        localStorage.setItem('user', user.uid);
      } else {
        this.setState({ user: null });
        localStorage.removeItem('user')
      }
    });
  }

  render() {

    return (
      <div className="App">
        {this.state.user ? (
          <div>
            <Navbar />
          </div>) :
          (<Login />)}
      </div>


    )
  };
 

Я делаю условный рендеринг компонента и веду пользователя на страницу входа, когда он не вошел в систему. Он автоматически отключает пользователя при обновлении с других путей, определенных в моем App.js . Мне нужно исправить это, потому что раньше fire.auth().currentUser.uid я получал uid пользователя в других компонентах с другим путем.

Любая помощь?

Проверьте следующие страницы.

Я думаю, что лучше использовать реагирующие ХУКИ.

используйте ПЕРЕХВАТЫ реакции

Firebase React ПОДКЛЮЧАЕТ учебник по аутентификации

https://www.youtube.com/watch?v=K_wZCW6wXIo

используйте компонент более высокого порядка

Учебное пособие по Firebase в React для начинающих [2019]

https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/#firebase-authentication