В приложении есть зарегестрирвоанные и незарегестрированные пользователи. Соответственно для тех и для других будут разные хедеры на сайте(хедеры лежат в отдельных файлах и экспортируются в страницы сайта).С помощью хука onEnter
в рутере реакта я реализую метод проверки наличия токена в текущей сессии у пользователя.Если токен есть токен есть, пользователь может зайти по определенным рутам, если нет, то его с помощью replace
редиректит на страницу с формой входа. Все работает, однако осталась одна загвоздка- хедер. Можно реализовать проверку в каждом компоненте и в зависимости от нее посдтавлять гостевой,или пользовательский хедер, но я не думаю,что это хорошее решение. Думаю лучшим способом было бы проверять залогинен пользователь,или нет и подкидывать тот или иной хедер в страницу на уровне рутера. К сожалению я не нашел подходящего решения в сети. Подскажите пожалуйста как лучше поступитьв такой ситуации?
Код рутера и onEnter(Сейчас я сделал 2 главные страницы и прпоисал в них нужные хедеры.Соответственно, если получится подбрасывать нужный хедер останется одна главная страница):
const App = React.createClass({
render: function() {
return (
<div className="content">
<div className="app-container">
{this.props.children}
</div>
</div>
)
}
});
function authCheck(nextState,replace) {
const token = window.localStorage.getItem(config.token);
if (token != undefined) {
} else {
replace('/login');
}
}
render((<Router history={hashHistory}>
<Route path="/" component={App}>
<IndexRoute component={MainPageGuest}/>
<Route path="dash" component={MainPageUser} onEnter={authCheck}/>
<Route path="user" component={UserPage} onEnter={authCheck}/>
</Route>
</Router>
), document.getElementById('application'));