Как сделать так, чтобы запросы шли, после установки токена?

Question

[Никита]

Подскажите как сделать так, чтобы запросы шли, после установки токена?

Этот код, просто получает токен и устанавливает его в настйроки axios

getAuthToken(uuid: any) {
        return instance.post(`/account/auth_token?deviceId=${uuid}`, {
            headers: {'Accept': 'text/plain'},
        })
            .then(res => instance.defaults.headers.common['Authorization'] = `Bearer ${res.data}`)
            .catch(e => console.log(e));
    },

В классе App в компоненте жизненного цикла я вызываю санку в которой в которой я выполняю запрос выше:

class App extends PureComponent<IAppProps> {

    componentDidMount(): any {
        console.log(this.props);
        this.props.getToken();
        
    }
    render() {
        return (
            <div className="App">
                <Route component={IntroSlider} path="/changePath" exact/>
                <Route component={BeginningWork} path="/start"/>
                <Route component={Work} path="/"/>
            </div>
        );
    }
}

И в компоненте Work, я делаю уже запрос за данными, только вот, проблема, в том, что заголовок, отвечающий за авторизацию сетается после запросов.

И получаю я три undefined, вместо данных и следом выводится мой заголовок


Подскажите, как решить данную? Как подождать пока заголовок засетается и потом уже делать запросы на сервер?

Comments

[Роман Александрович]

покажите всю this.props.getToken();

[Никита]

Роман Александрович,

const fetchToken = (uuid: any) => {
        console.log(uuid);
        AccountAPI.getAuthToken(uuid)
          .then(() => dispatch({ type: RequestActionTypes.GET_TOKEN_SUCCESS }))
          .catch(e => dispatch(
            {
                type: RequestActionTypes.GET_TOKEN_ERROR,
                payload: e,
            }));
    };

    dispatch({ type: RequestActionTypes.GET_TOKEN_START });
    const uuid = localStorage.getItem('uuid');
    if (uuid) {
        dispatch({ type: RequestActionTypes.UUID_ALREADY_EXISTS });
        fetchToken(uuid);
    } else {
        localStorage.setItem('uuid', generateUUID);
        const newUuid = localStorage.getItem('uuid');
        fetchToken(newUuid);
    }

Answer 1

[Владимир]

Не вижу используете ли вы контекст или редакс.
Устанавливайте флаг isAuthorized и рисуйте компонент, который делает запросы только если этот флаг стоит, тогда получится слать запросы на componentDidMount ну или рисуйте и проверяйте при монтировании или при апдейте пропертей стоит ли этот флаг.

Comments

[Никита]

Использую redux
Думал, об этом, кстати, но тогда получаются на componentDidUpdate, потому что при моунте запрос только будет выполняться

[Владимир]

Никита, Есть вариант не монтировать компонент, который выполняет запросы если не прошла авторизация