Аутентификация перехватчика Reactjs на OnEnter вызывает бесконечный цикл - PullRequest
Новая
       13

Аутентификация перехватчика Reactjs на OnEnter вызывает бесконечный цикл

0 голосов
/ 06 мая 2018

Я пытаюсь перенаправить зарегистрированного пользователя на страницу панели инструментов.

Вот мой код: 

function requireAuth(nextState, replace) {
  if(isLoggedIn()) {
    console.log("user is logged in");
    replace('/dashboard');
  } else {
    replace('/');
  } 
}

const Root = () => {
  return (
    <div className="container">
      <Router history={browserHistory}>
        <Route path="/" component={App}>
          <Route onEnter={requireAuth}>
            <Route path="dashboard" component={AllEvents}/>
          </Route>
        </Route>
      </Router>
    </div>
  )
}

Когда пользователь вошел в систему, мое приложение работает в цикле с методом requireAuth.

Вот скриншот консоли. enter image description here

Я уже рассмотрел два похожих вопроса о StackOverflow:

реагирует Превышен максимальный размер стека вызовов

React-router, onEnter вызывает бесконечный цикл с аутентификацией

Я пробовал их обоих, но, к сожалению, эти примеры мне не помогли. (Я тоже новичок в React)

Скажите, пожалуйста, что не так с моим кодом?

1 Ответ

0 голосов
/ 06 мая 2018

Вы получаете бесконечный цикл, потому что если пользователь вошел в систему, он всегда перенаправляет его на /dashboard и повторяет процесс перенаправления, начиная с / и снова нажимая requireAuth.

Попробуйте: 

function onlyUnAuthenticated(nextState, replace, callback) {
  if(isLoggedIn()) {
    replace('/dashboard');
  }
  callback();
}

function onlyAuthenticated(nextState, replace, callback) {
  if(!isLoggedIn()) {
    replace('/');
  } 
  callback();
}

const Root = () => {
  return (
    <div className="container">
      <Router history={browserHistory}>
        <Route path="/" component={App} onEnter={onlyUnAuthenticated}>
          <Route path="dashboard" component={AllEvents} onEnter={onlyAuthenticated}/>
        </Route>
      </Router>
    </div>
  )
}

Я думаю, вам придется использовать обратный вызов в хуке .

...