Перенаправление частного маршрута маршрутизатора MobX + React

Попытка настроить компонент частного маршрута, который обновляется всякий раз, когда пользовательский authToken становится недействительным.

Вот частный маршрут:

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

    return (<Route {...rest} render = {(props: any) => (
        authCredentialsStore.credToken
            ? <Component {...props} />
            : <Redirect to='/login'/>
    )}/>);
});

authCredentialsStore предоставляется через импорт.

Это магазин:

 class AuthCredentialsStore {

    @observable _authCredentials: AuthCredentials;
    @observable credToken = this._authCredentials ? this._authCredentials.authToken : null;

    set authCredentials(creds: AuthCredentials) {
        this._authCredentials = creds;;
    }

    get authCredentials() {
        return this._authCredentials;
    }

    removeCredentials() {
        this._authCredentials = null;
    }
}

export const authCredentialsStore = new AuthCredentials();

Затем в дочернем компоненте я делаю выборку на componentDidMount, и если выборка не удалась, я хочу сбросить хранилище и перенаправить пользователя на страницу входа:

 class ChildComponent extends React.Component<any, any> {

    fetchItems(): void {
        const authToken = authCredentialsStore.credToken;
        const options = {
            method: 'GET',
            headers: {
                'Authorization': `${authToken}`
            }
        };
        fetch('some_url', options)
            .then(res => {
                if (!res.ok) {
                    authCredentialsStore.removeCredentials();
                }
                return res.json();
            })
            .then(/*do something with results*/))
            .catch(/*do error handling*/);
    }

    componentDidMount() {
        this.fetchItems();
    }

    render() {...}
}

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

попробуйте присвоить значение authCredentialsStore.credToken локальной переменной вне метода Routerender и просто проверьте его. Я думаю, что теперь mobx не наблюдает за этим, потому что он находится в другой области действия.

Uzi 30.12.2018 21:21
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
1
980
0

Другие вопросы по теме