JavaScript — React Router Redirect после входа в систему не работает должным образом

React Router Redirect после входа в систему не работает должным образом

Я разрабатываю базовое приложение реагирования и включаю реагирующий маршрутизатор. У меня есть простой контроль аутентификации с локальным хранилищем.

После того, как пользователь вводит имя пользователя и пароль и нажимает кнопку входа, я выполняю HTTP-вызов и получаю ответ от сервера с Axios. Затем я установил пункт userStorage ‘user’.

Чтобы защитить маршрут, я реализовал компонент PrivateRoute, где я проверяю, установлено ли «user» в localStorage.

Я уже пытался переместить набор Local Storage внутрь then () в HTTP-вызове Axios, но ничего не изменилось.

Api CALL

  loginUser (username,password) { return HTTP.post('/login', null, { params: { username, password }}) Api.loginUser(username,password) .then( (response) ={amp}gt; { console.log("Response DATA"); Api.saveUserData(response.data); this.setState({ redirect: true }); }) 

МЕТОД РЕНДЕРА

 if (this.state.redirect === true) { return {amp}lt;Redirect to='/home'/{amp}gt;; } 

APP КОМПОНЕНТ

  class App extends Component { render() { return ( {amp}lt;Router{amp}gt; {amp}lt;Route path="/login" component={Login} /{amp}gt; {amp}lt;PrivateRoute path="/home" component={Home} /{amp}gt; {amp}lt;/Router{amp}gt; ); } } 

ЧАСТНЫЙ МАРШРУТНЫЙ КОМПОНЕНТ

  const PrivateRoute = ({ component: Component, ...rest }) ={amp}gt; { const isLoggedIn = AuthService.isAuthenticated(); return ( {amp}lt;Route {...rest} render={props ={amp}gt; isLoggedIn ? ( {amp}lt;Component {...props} /{amp}gt; ) : ( {amp}lt;Redirect to={{ pathname: '/login', state: { from: props.location } }} /{amp}gt; ) } /{amp}gt; ) } 

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

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector