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, чтобы получить пользовательский идентификатор в других компонентах с другим путем.
Любая помощь?