@WapGeaR
Программист

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

Никак не могу разобраться с правильностью авторизации.
Как должна выглядеть функция проверяющая возможность посещения определенной страницы пользователем.
В наличии:
  • React 15.0.1
  • Redux 3.4.0
  • React-Router 2.x


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

Как правильно построить onEnter функцию?
  • Вопрос задан
  • 4972 просмотра
Пригласить эксперта
Ответы на вопрос 1
maxfarseer
@maxfarseer
https://maxpfrontend.ru, обучаю реакту и компании
Вопрос волнующий многих. Опишу два способа.

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 ;) Как только найду устраивающее решение, так сразу и закончу свой мини-туториал
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы