Question

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在我的Web应用程序中创建不同的路径。然后在我的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。

有帮助吗？

Answer 1

检查以下页面。

我认为使用React HOOKS更好。

使用React HOOKS

Firebase + React HOOKS身份验证教程

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

使用高阶分量

React初学者教程中的Firebase [2019]

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

当我刷新其他路由路径时，Firebase身份验证会重置

1 个答案:

使用React HOOKS

使用高阶分量