2

В приложении есть зарегестрирвоанные и незарегестрированные пользователи. Соответственно для тех и для других будут разные хедеры на сайте(хедеры лежат в отдельных файлах и экспортируются в страницы сайта).С помощью хука 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'));

2 ответа 2

2

Можно сделать так, чтобы не вставлять код в каждый компонент:

const App = React.createClass({

  render: function() {
    return (
        <div className="content">
            <div className="app-container">
                {'залогенен' ? <HeaderWithAuth /> : <HeaderNotAuth />}
                {this.props.children}
            </div>
        </div>
    )
  }
});

Теперь header будет находиться рядом с компонентом.

2
  • все сработало хорошо.спасибо). но уже просто любопытно-есть ли способ передачи компонентов по маршрутам в рутере?
    – Iga
    15 мар 2017 в 11:02
  • Как вы предполагаете я думаю нет(да и зачем так усложнять). Там можно передавать только какие-нибудь значения через params
    – qpeela
    15 мар 2017 в 11:52
0

Можно вместо component в роутере передать св-во components, среди которых будет указан необходимый для таких маршрутов хедер. Такой подход позволит не только учитывать авторизацию, но и, например, роли. Проверка так же остается в onEnter, только вот что именно рендерить определяется на уровне роутера.

<Route component={App}>
  <Route path="guest" components={{page: MainPageGuest, header: GuestHeader}}/>
  <Route path="users" components={{page: UserPage, header: UserHeader}}>
    <Route path="users/:id" component={Profile}/>
  </Route>
  <Route path="admin" components={{page: AdminPage, header: AdminHeader}}>
    <Route path="admins/panel" component={Panel}/>
  </Route>
</Route>

class App extends React.Component {
  render () {
    const { page, header } = this.props;
    return (
      <div>
        <div className="header">
          {header}
        </div>
        <div className="page">
          {page}
        </div>
      </div>
    )
  }
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.