Маршрут Protected React перенаправляет до того, как реквизиты получат состояние Redux

Question

Когда я обновляю страницу, мой защищенный маршрут, созданный с помощью react-router-dom, обрабатывается до того, как mapStateToProps сработает, и компонент получит реквизиты.Это вызывает перенаправление на маршрут /login, хотя я уже вошел в систему.

У меня есть магазин Redux, похожий на этот:

const initialState = {
    isAuthenticated: false,
    user: {}
};

и компонент с именем App.js, который содержитмаршруты:

componentDidMount() {
    if (localStorage.token)
        setAuthToken(localStorage.token);

    store.dispatch(loadUser());
}

Где метод setAuthToken добавляет заголовки к запросам axios.Есть также метод loadUser(), который является создателем действия с таким кодом:

export const loadUser = () => async dispatch => {
    if (localStorage.token) {
        setAuthToken(localStorage.token);
    }

    try {
        const res = await axios.get('/api/v1/user');

        dispatch({
            type: USER_LOADED,
            payload: res.data
        });
    }

    catch (e) {
        console.log(e);
    }
};

Таким образом, он в основном меняет поле isAuthenticated магазина на true и добавляет информацию о пользователе в объект user в магазине,если в localStorage есть токен JWT.

В моем компоненте защищенного маршрута у меня есть код, который перенаправляет на /login, если в хранилище Redux isAuthenticated равно false.

render() {
    if (this.props.auth.isAuthenticated === false)
        return (<Redirect to={'/sign-in'}/>);

Теперь все работает нормально, если я нажимаю ссылку на защищенный маршрут из панели навигации.Если я вошел в систему, то отображается защищенный маршрут.Если это не так, то я перенаправлен на /login.

Проблема возникает, когда я обновляю страницу, находящуюся на защищенном маршруте.Я сразу же перенаправлен на /login, потому что страница отображается до того, как компонент получает состояние хранилища Redux в реквизитах.

Как это исправить?Стоит ли каким-то образом подождать реквизит или, вернее, изменить метод защиты маршрутов?

Answer 1

Ну, один из простых способов исправить это - добавить состояние загрузки в ваш редуктор. Добавьте простое действие, которое отправляется в начале loadUser, которое превращает загрузку в true, и после вызова API, когда ваш редуктор достигает значения USER_LOADED, оно превращает загрузку в false, заполняет пользовательское состояние, изменяет isAuthenticated на true / false в зависимости от того, пользователь зарегистрирован. И измените условие на компоненте защищенного маршрута на this.props.auth.isAuthenticated === false &&! this.props.user.loading.