@Cruper
web-падаван

Как в React организовать инициализацию данных пользователя?

Где и как лучше всего производить первичную инициализацию приложения, имея на клиенте токен пользователя.
При открытии страницы хочу проверять валидность токена, а после этого пускать его по запрошенному URI.
Сейчас компонент App выглядит следующим образом:

import store from '../store'

class Application extends React.PureComponent {
  constructor (props) {
    super(props)

    this.state = {
      initialized: false
    }
  }

  componentDidMount () {
    // verifyToken - action, в котором происходит запрос к серверу
    store.dispatch(verifyToken()).then(() => {
      this.setState({ initialized: true })
    })
  }

  renderPreloader () {
    return <div className='app-preloader'><Spinner /></div>
  }

  renderApp () {
    return <BrowserRouter>
      <Provider store={store}>
        <Switch>
          // SecurityRoute - компонент, проверяющий в store наличие у пользователя прав на просмотр страницы. Если такого права нет - редиректит
          <SecurityRoute field='username' deny path='/login' component={PageAuth} />
          <Route component={PageMain} />
        </Switch>
      </Provider>
    </BrowserRouter>
  }

  render () {
    return this.state.initialized ? this.renderApp() : this.renderPreloader()
  }
}
  • Вопрос задан
  • 264 просмотра
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
store.dispatch(init());  // тут

const root = (
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
);

ReactDom.render(root, document.getElementById('root'));

Так запросы проверки валидности и получения данных пользователя будут инициированы до монтирования приложения.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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