React, Router и Аутентификация. Как лучше реализовать?

Question

[Илья Лившиц]

Привет. У меня SPA на реакте и роутере. Есть REST сервис для аутентификации. Но как сделать его безопасным? Я могу сделать с клиента прямо запрос к этому сервису и в случае успешной авторизации меня пустит на страничку нужную, если нет, то редиректнет. Но это же не безопасно, ведь можно просто напрямую перейти на нужную страницу. Подскажите пожалуйста?

Answer 1

[Константин Громов]

Эта страница же не статична и целиком содержится в билде, а строится по данным полученным по соответствующему ей запросу? Если да, то этот запрос должен на сервере проверять сессию или токен, которые устанавливаются сервисом для аутентификации. И в случае нехватки прав вместо информации, на странице, выводить ошибку. Если нет - опишите подробности.

Answer 2

[Максим]

Задачу можно разделить на 2 части:

1) получение токена (идентификатора сессии или что еще нужно) от сервиса.
2) onEnter хук в роутере

Примерный код:

export default function configRoutes(store) {
  function _ensureAuthenticated(nextState, replace, callback) {
    const { dispatch } = store 
    const { session } = store.getState()
    const { currentUser } = session

    if (!currentUser && localStorage.getItem('token')) {
      dispatch(getCurrentAccount())
    } else if (!localStorage.getItem('token')) {
      replace('/signin')
    }

    callback()
  }

  return (
    <Route component={App}>
      <Route path='/signin' component={SigninContainer} />
      <Route path='/signup' component={SignupContainer} />

      <Route path='/' component={AuthenticatedContainer} onEnter={_ensureAuthenticated}>
        <Route component={ReportContainer}>
          <Route path='/activities' component={ActivitiesContainer} />
          <Route path='/activities/:id' component={CaptionsContainer} />
        </Route>
      </Route>

    </Route>
  )
}

Более подробно можно посмотреть в источнике. ConfigRoutes функция вызывается здесь.