Я разрабатываю приложение React + Meteor, и у меня возникают проблемы с функцией входа пользователя.
У меня есть панель навигации заголовка, которая отображает другой компонент в зависимости от того, вошел ли пользователь в систему.
Как это:
export default class Header extends Component {
constructor(props) {
super(props)
this.state = {
user: Meteor.user()
}
}
render() {
return (
<header className="main-header">
<nav className="navbar navbar-static-top">
<div className="navbar-custom-menu">
{this.state.user() !== null ? <LoggedInNavigation /> : <LoggedOutNavigation />}
</div>
</nav>
</header>
)
}
}
Теперь это работает, но не меняется при входе пользователя в систему. Мне нужно обновить страницу, чтобы изменить представления (что, очевидно, не идеально).
Вот мой код входа:
Meteor.loginWithPassword(this.state.email, this.state.password, (error) => {
if (error)
this.setState({ meteorError: "Error: " + error.reason })
else {
this.setState({ meteorError: "" })
// Handle successful login
}
})
Проблема в том, что эти два блока кода находятся в разных компонентах.
Первый блок находится в imports/ui/components/main-layout/Header, а второй блок — в imports/ui/components/authentication/Login.
Как я уже сказал, проблема в том, что пользователь может войти в систему, но представление не меняется в зависимости от состояния аутентификации. Какова наилучшая практика для решения этой проблемы?
ИЗМЕНИТЬ:
Вот иерархия компонентов:
1 - LoggedOutNav
MainLayout -> Header -> LoggedOutNav
2 - Код входа
MainLayout -> Routes -> (Route path="/login" component={Login}) -> LoginForm
