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

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

0 голосов
/ 17 октября 2019

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

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

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

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

Api CALL 

  loginUser (username,password) {
    return HTTP.post('/login',  null, { params: {
      username,
      password
    }})


    Api.loginUser(username,password)
        .then( (response) => {
            console.log("Response DATA");
            Api.saveUserData(response.data);
            this.setState({ redirect: true });
        })

МЕТОД RENDER 

if (this.state.redirect === true) {
    return <Redirect to='/home'/>;
}

КОМПОНЕНТ APP 

    class App extends Component {

      render() {
        return (
          <Router>
            <Route path="/login" component={Login} />
            <PrivateRoute path="/home" component={Home} />
          </Router>
        );
      }
    }

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

    const PrivateRoute = ({ component: Component, ...rest }) => {

      const isLoggedIn = AuthService.isAuthenticated();

      return (
        <Route
          {...rest}
          render={props =>
            isLoggedIn ? (
              <Component {...props} />
            ) : (
              <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
            )
          }
        />
      )
    }

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

...