Как подружить React-Router onEnter и redux?

Question

[Антон Измайлов]

Никак не могу разобраться с правильностью авторизации.
Как должна выглядеть функция проверяющая возможность посещения определенной страницы пользователем.
В наличии:

• React 15.0.1
  
• Redux 3.4.0
  
• React-Router 2.x
  

Так же в localStorage хранится user_id и token
При загрузке приложения срабатывает проверка токена и результат пишется в reducer.user


Как правильно построить onEnter функцию?

Answer 1

[Максим]

Вопрос волнующий многих. Опишу два способа.

1
Есть альтернатива onEnter: компонент, проверяющий показывать ли содержимое, либо показывать "доступ запрещен", например. Сам способ я подсмотрел здесь, если вы понимаете достаточно глубоко redux - то все понятно.
Если нет, то я когда-то должен закончить мини-учебник по роутингу и вернусь к этому ответу.

2
Чтобы в onEnter прокидывать "store", нужно обернуть роуты в функцию.

Выглядит примерно так:

export function getRoutes(store) {
  return (
    <div>
      <Route path='/' component={App}>
        <IndexRoute component={Home} />
        <Route path='/admin' component={Admin} onEnter={Admin.onEnter.bind(this,store)}/>
        <Route path='/genre/:genre' component={Genre}>
          <Route path='/genre/:genre/:release' component={Release} />
        </Route>
        <Route path='/list' component={List} />
      </Route>
      <Route path='*' component={NotFound} />
    </div>
  )
}

Здесь в компонент Admin есть метод onEnter (я его вынес туда, так как это удобнее по-моему), и в нем вы можете спокойно проверять токен. Так же можете использовать store.getState() и подобное. Не забывайте, про стандартные возможности redux - они открывают многое, для чего необязательно тащить библиотеки.

export default class Admin extends Component {
  static onEnter(store, nextState, replace) {
    const user = store.getState().user
    if (!user) {
      replace('/')
    } 
  }
  render() {
    return (
      <div className='row'>
        <div className='col-md-12'>Раздел /admin</div>
      </div>
    )
  }
}

Тем не менее, вопрос для меня лично открыт. Я пытаюсь решить кейс с редиректом в ответе на action ;) Как только найду устраивающее решение, так сразу и закончу свой мини-туториал