@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 функцию?
  • Вопрос задан
  • 4211 просмотров
Пригласить эксперта
Ответы на вопрос 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 ;) Как только найду устраивающее решение, так сразу и закончу свой мини-туториал
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
BSSL Москва
от 50 000 до 150 000 руб.
Potok Москва
До 200 000 руб.
от 70 000 до 140 000 руб.
21 июл. 2019, в 00:52
80000 руб./за проект
20 июл. 2019, в 19:38
10000 руб./за проект
20 июл. 2019, в 17:55
15000 руб./за проект