React native Refresh работает, но при следующем вызове по-прежнему используется последний токен

У вас есть состояние гонки запросов, и нет правильного решения, которое полностью решит эту проблему. Следующие пункты могут быть использованы в качестве отправной точки для решения этой проблемы:

• Используйте обновление токена отдельно и дождитесь его выполнения на стороне клиента, например. отправить обновление токена (что-то вроде GET /keepalive) в случае, если какой-либо запрос был отправлен в половине периода тайм-аута сеанса - это приведет к тому, что все запросы будут авторизованы на 100% (вариант, который я бы обязательно использовал - это может быть также используется для отслеживания не только запросов, но и событий)
• Токен очистки после получения 401 — вы не увидите работающее приложение после перезагрузки, предполагая, что удаление действительного токена в случае граничных сценариев является положительным сценарием (простое в реализации решение)
• Повторить запрос, который получил 401 с некоторой задержкой (на самом деле не лучший вариант)

• Принудительное обновление токенов чаще, чем время ожидания — изменение их на 50-75% времени ожидания уменьшит количество неудачных запросов (но они все равно будут сохраняться, если пользователь бездействовал в течение всего времени сеанса). Таким образом, любой действительный запрос вернет новый действительный токен, который будет использоваться вместо старого.

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

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

export const refreshToken = async () => {
  let valid = true;

  if (!validateAccessToken()) {
    try {
      //logic to refresh token
      valid = true;
    } catch (err) {
      valid = false;
    }

    return valid;
  }
  return valid;
};

const validateAccessToken = () => {
  const currentTime = new Date();

  if (
    moment(currentTime).add(10, 'm') <
    moment(jwtDecode(token).exp * 1000)
  ) {
    return true;
  }
  return false;
};

Теперь, когда у нас есть эта вспомогательная функция, я вызываю ее для всех необходимых действий приведения.

const shouldRefreshToken = await refreshToken();
    if (!shouldRefreshToken) {
      dispatch({
        type: OPERATION_FAILED,
        payload: apiErrorGenerator({ err: { response: { status: 401 } } })
      });
    } else { 
      //...
    }

В вашем промежуточном программном обеспечении вы делаете store.dispatch асинхронным, но исходная подпись store.dispatch является синхронной. Это может иметь серьезные побочные эффекты.

Давайте рассмотрим простое промежуточное ПО, которое регистрирует каждое действие, которое происходит в приложении, вместе с состоянием, вычисляемым после него:

const logger = store => next => action => {
  console.info('dispatching', action)
  let result = next(action)
  console.info('next state', store.getState())
  return result
}

Написание вышеуказанного промежуточного программного обеспечения по существу делает следующее:

const next = store.dispatch  // you take current version of store.dispatch
store.dispatch = function dispatchAndLog(action) {  // you change it to meet your needs
  console.info('dispatching', action)
  let result = next(action) // and you return whatever the current version is supposed to return
  console.info('next state', store.getState())
  return result
}

Рассмотрим этот пример с тремя такими промежуточными программами, связанными вместе:

const {
  createStore,
  applyMiddleware,
  combineReducers,
  compose
} = window.Redux;

const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;

    default:
      return state;
  }
};

const rootReducer = combineReducers({
  counter: counterReducer
});


const logger = store => next => action => {
  console.info("dispatching", action);
  let result = next(action);
  console.info("next state", store.getState());
  return result;
};

const logger2 = store => next => action => {
  console.info("dispatching 2", action);
  let result = next(action);
  console.info("next state 2", store.getState());
  return result;
};

const logger3 = store => next => action => {
  console.info("dispatching 3", action);
  let result = next(action);
  console.info("next state 3", store.getState());
  return result;
};

const middlewareEnhancer = applyMiddleware(logger, logger2, logger3);

const store = createStore(rootReducer, middlewareEnhancer);

store.dispatch({
  type: "INCREMENT"
});

console.info('current state', store.getState());

<script src = "https://unpkg.com/[email protected]/dist/redux.js"></script>

Сначала logger получает действие, затем logger2, затем logger3, а затем переходит к фактическому store.dispatch и вызывается редюсер. Редюсер изменяет состояние с 0 на 1, а logger3 получает обновленное состояние и передает возвращаемое значение (действие) обратно в logger2, а затем в logger.

Теперь давайте рассмотрим, что происходит, когда вы меняете store.dispatch на асинхронную функцию где-то в середине цепочки:

const logger2 = store => next => async action => {
  function wait(ms) {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve();
      }, ms);
    });
  }
  await wait(5000).then(v => {
    console.info("dispatching 2", action);
    let result = next(action);
    console.info("next state 2", store.getState());
    return result;
  });
};

Я изменил logger2, но logger (тот, что выше по цепочке) понятия не имеет, что next теперь асинхронно. Он вернет ожидание Promise и вернется с «необновленным» состоянием, потому что отправленное действие еще не достигло редьюсера.

const {
  createStore,
  applyMiddleware,
  combineReducers,
  compose
} = window.Redux;

const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;

    default:
      return state;
  }
};

const rootReducer = combineReducers({
  counter: counterReducer
});


const logger = store => next => action => {
  console.info("dispatching", action);
  let result = next(action); // will return a pending Promise
  console.info("next state", store.getState());
  return result;
};

const logger2 = store => next => async action => {
  function wait(ms) {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve();
      }, ms);
    });
  }
  await wait(2000).then(() => {
    console.info("dispatching 2", action);
    let result = next(action);
    console.info("next state 2", store.getState());
    return result;
  });
};

const logger3 = store => next => action => {
  console.info("dispatching 3", action);
  let result = next(action);
  console.info("next state 3", store.getState());
  return result;
};

const middlewareEnhancer = applyMiddleware(logger, logger2, logger3);

const store = createStore(rootReducer, middlewareEnhancer);

store.dispatch({ // console.info of it's return value is too a pending `Promise`
  type: "INCREMENT"
});

console.info('current state', store.getState());

<script src = "https://unpkg.com/[email protected]/dist/redux.js"></script>

Таким образом, мой store.dispatch немедленно возвращается из цепочки промежуточного программного обеспечения с этим ожидающим промисом, а console.info('current state', store.getState()); по-прежнему печатает 0. Действие достигает исходного store.dispatch, а редюсер еще долго после этого.

Я не знаю всей вашей установки, но я предполагаю, что что-то подобное происходит в вашем случае. Вы предполагаете, что ваше промежуточное ПО что-то сделало и совершило обход, но на самом деле оно не закончило работу (или никто await не заставил его закончить ее). Возможно, вы отправляете действие для извлечения /templates, и, поскольку вы написали промежуточное ПО для автоматического обновления токена носителя, вы предполагаете, что вспомогательная утилита fetch будет вызываться с совершенно новым токеном. Но dispatch вернулся рано с ожидающим обещанием, и ваш токен все еще старый.

Кроме того, только одна вещь кажется явно неправильной: вы дважды отправляете одно и то же действие в промежуточном программном обеспечении через next:

const tokenMiddleware = store => next => async action => {
  if (something) {
    if (something) {
      await fetch('/token/refresh',)
        .then(async (data) => {
            return await Promise.all([
              // ...
            ]).then((values) => {
              return next(action); // First, after the `Promise.all` resolves
            });
        });
      return next(action); // then again after the `fetch` resolves, this one seems redundant & should be removed
    } else {
      return next(action);
    }
  }

Рекомендации:

1. Храните свои токены в хранилище избыточности, сохраняйте их в хранилище и повторно гидратируйте хранилище избыточности из хранилища.
2. Напишите один Создатель асинхронных действий для всех вызовов API, который при необходимости будет обновлять токен и отправлять действие асинхронно только после обновления токена.

Пример с избыточный преобразователь:

function apiCallMaker(dispatch, url, actions) {
  dispatch({
    type: actions[0]
  })

  return fetch(url)
    .then(
      response => response.json(),
      error => {
        dispatch({
          type: actions[2],
          payload: error
        })
      }
    )
    .then(json =>
      dispatch({
        type: actions[1],
        payload: json
      })
    )
  }
}

export function createApiCallingActions(url, actions) {
  return function(dispatch, getState) {

    const { accessToken, refreshToken } = getState();
    if (neededToRefresh) {
      return fetch(url)
        .then(
          response => response.json(),
          error => {
            dispatch({
              type: 'TOKEN_REFRESH_FAILURE',
              payload: error
            })
          }
        )
        .then(json =>
          dispatch({
              type: 'TOKEN_REFRESH_SUCCESS',
              payload: json
          })
          apiCallMaker(dispatch, url, actions)
        )
    } else {
      return apiCallMaker(dispatch, url, actions)
    }
}

Вы бы использовали его так:

dispatch(createApiCallingActions('/api/foo', ['FOO FETCH', 'FOO SUCCESS', 'FOO FAILURE'])

dispatch(createApiCallingActions('/api/bar', ['BAR FETCH', 'BAR SUCCESS', 'BAR FAILURE'])