MobX + React Router Перенаправление частного маршрута - PullRequest
Новая
       12

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

0 голосов
/ 27 декабря 2018

Попытка настроить компонент частного маршрута, который обновляется всякий раз, когда пользователь 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.

...