Axios Interceptors повторите первоначальный запрос и получите доступ к оригинальному обещанию

Ответ 1

Обновление от 13 февраля 2019 г.

Поскольку многие люди проявляют интерес к этой теме, я создал пакет axios-auth-refresh, который должен помочь вам добиться поведения, указанного здесь.

Ключевым моментом здесь является возвращение правильного объекта Promise, поэтому вы можете использовать .then() для создания цепочки. Мы можем использовать состояние Vuex для этого. Если происходит вызов на обновление, мы можем не только установить состояние refreshing на true, мы также можем установить ожидающий вызов на обновление. Таким образом, использование .then() всегда будет привязано к нужному объекту Promise и будет выполнено после выполнения Promise. Это гарантирует, что вам не понадобится дополнительная очередь для хранения вызовов, ожидающих обновления токена.

function refreshToken(store) {
    if (store.state.auth.isRefreshing) {
        return store.state.auth.refreshingCall;
    }
    store.commit('auth/setRefreshingState', true);
    const refreshingCall = Axios.get('get token').then(({ data: { token } }) => {
        store.commit('auth/setToken', token)
        store.commit('auth/setRefreshingState', false);
        store.commit('auth/setRefreshingCall', undefined);
        return Promise.resolve(true);
    });
    store.commit('auth/setRefreshingCall', refreshingCall);
    return refreshingCall;
}

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

Axios.interceptors.response.use(response => response, error => {
    const status = error.response ? error.response.status : null

    if (status === 401) {

        return refreshToken(store).then(_ => {
            error.config.headers['Authorization'] = 'Bearer ' + store.state.auth.token;
            error.config.baseURL = undefined;
            return Axios.request(error.config);
        });
    }

    return Promise.reject(error);
});

Это позволит вам выполнить все ожидающие запросы еще раз. Но все сразу, без каких-либо запросов.

Если вы хотите, чтобы ожидающие запросы выполнялись в том порядке, в котором они действительно были вызваны, вам нужно передать обратный вызов в качестве второго параметра функции refreshToken(), например, так:

function refreshToken(store, cb) {
    if (store.state.auth.isRefreshing) {
        const chained = store.state.auth.refreshingCall.then(cb);
        store.commit('auth/setRefreshingCall', chained);
        return chained;
    }
    store.commit('auth/setRefreshingState', true);
    const refreshingCall = Axios.get('get token').then(({ data: { token } }) => {
        store.commit('auth/setToken', token)
        store.commit('auth/setRefreshingState', false);
        store.commit('auth/setRefreshingCall', undefined);
        return Promise.resolve(token);
    }).then(cb);
    store.commit('auth/setRefreshingCall', refreshingCall);
    return refreshingCall;
}

И перехватчик:

Axios.interceptors.response.use(response => response, error => {
    const status = error.response ? error.response.status : null

    if (status === 401) {

        return refreshToken(store, _ => {
            error.config.headers['Authorization'] = 'Bearer ' + store.state.auth.token;
            error.config.baseURL = undefined;
            return Axios.request(error.config);
        });
    }

    return Promise.reject(error);
});

Я не тестировал второй пример, но он должен сработать или, по крайней мере, дать вам представление.

Рабочая демонстрация первого примера - из-за ложных запросов и используемой для них демо-версии сервиса через некоторое время он не будет работать, тем не менее, код есть.

Источник: Перехватчики - как предотвратить перехват перехваченных сообщений как ошибку

Ответ 2

Почему бы не попробовать что-то подобное?

Здесь я использую перехватчики AXIOS в обоих направлениях. Для исходящего направления я установил заголовок Authorization. Для входящего направления - если есть ошибка, я возвращаю обещание (и AXIOS попытается устранить его). Обещание проверяет, в чем заключалась ошибка - если это было 401, и мы видим это в первый раз (то есть мы не внутри повторной попытки), то я пытаюсь обновить токен. В противном случае выкидываю оригинальную ошибку. В моем случае refreshToken() использует AWS Cognito, но вы можете использовать все, что вам больше подходит. Здесь у меня есть 2 обратных вызова для refreshToken():

1. Когда токен успешно обновляется, я повторяю запрос AXIOS, используя обновленную конфигурацию, включая новый свежий токен и устанавливая флаг retry чтобы мы не вводили бесконечный цикл, если API повторно отвечает 401 ошибками. Мы должны передать аргументы resolve и reject AXIOS, иначе наше новое обещание никогда не будет разрешено/отклонено.

2. если токен не может быть обновлен по какой-либо причине - мы отклоняем обещание. Мы не можем просто выдать ошибку, потому что может быть блок try/catch вокруг обратного вызова внутри AWS Cognito

Vue.prototype.$axios = axios.create(
  {
    headers:
      {
        'Content-Type': 'application/json',
      },
    baseURL: process.env.API_URL
  }
);

Vue.prototype.$axios.interceptors.request.use(
  config =>
  {
    events.$emit('show_spin');
    let token = getTokenID();
    if(token && token.length) config.headers['Authorization'] = token;
    return config;
  },
  error =>
  {
    events.$emit('hide_spin');
    if (error.status === 401) VueRouter.push('/login'); // probably not needed
    else throw error;
  }
);

Vue.prototype.$axios.interceptors.response.use(
  response =>
  {
    events.$emit('hide_spin');
    return response;
  },
  error =>
  {
    events.$emit('hide_spin');
    return new Promise(function(resolve,reject)
    {
      if (error.config && error.response && error.response.status === 401 && !error.config.__isRetry)
      {
        myVue.refreshToken(function()
        {
          error.config.__isRetry = true;
          error.config.headers['Authorization'] = getTokenID();
          myVue.$axios(error.config).then(resolve,reject);
        },function(flag) // true = invalid session, false = something else
        {
          if(process.env.NODE_ENV === 'development') console.log('Could not refresh token');
          if(getUserID()) myVue.showFailed('Could not refresh the Authorization Token');
          reject(flag);
        });
      }
      else throw error;
    });
  }
);