Refre sh функциональность токена в приложении React с использованием redux и redux-saga - PullRequest
3 голосов
/ 18 марта 2020

У меня возникли проблемы с потоком токенов refre sh в моем приложении React. Я использую перехватчики ax ios для обработки ответа с помощью statusCode === 401, повторно определяю sh моих токенов и повторяю все запросы после этого.

Ax ios перехватчики

export const customAxios = axios.create({
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Accept': 'application/json',
    "Content-Type": "application/json",
  }
});

customAxios.interceptors.response.use(
  function(response) {
    return response
  },
  function(error) {
    const errorResponse = error.response;
    if (isTokenExpiredError(errorResponse)) {
      return resetTokenAndReattemptRequest(error);
    }
    return Promise.reject(error);
  }
)
function isTokenExpiredError(errorResponse) {
  if (errorResponse.status === 401) {
    return true
  }
}

let isAlreadyFetchingAccessToken = false;
let subscribers = [];

async function resetTokenAndReattemptRequest(error) {
  const {dispatch, getState} = store;

  try {
    const { response: errorResponse } = error;
    const resetToken = getState().login.refreshToken;
    if (!resetToken) {
      return Promise.reject(error);
    }
    const retryOriginalRequest = new Promise(resolve => {
      addSubscriber(tokens => {
        errorResponse.config.headers.Authorization = 'Bearer ' + tokens.accessToken;
        resolve(axios(errorResponse.config));
      });
    });
    if (!isAlreadyFetchingAccessToken) {
      isAlreadyFetchingAccessToken = true;
      const response = await axios.get(`${API}/auth/refreshtoken`, configHeaders(resetToken))
      if (!response.data) {
        return Promise.reject(error);
      }
      const newTokens = response.data;
      dispatch(refreshTokenSuccess(newTokens))
      isAlreadyFetchingAccessToken = false;
      onAccessTokenFetched(newTokens);
    }
    return retryOriginalRequest;
  } catch (err) {
    return Promise.reject(err);
  }
}

function onAccessTokenFetched(tokens) {
  subscribers.forEach(callback => callback(tokens));
  subscribers = [];
}

function addSubscriber(callback) {
  subscribers.push(callback);
}

И все работает отлично! Но у меня есть проблема с refre sh функциональностью, когда пользователь открывает новые вкладки браузера. В моем приложении у меня есть «онлайн» таблица данных, с некоторыми delay для повторного запроса.

Redux-Saga actionChannel для выполнения запросов с некоторой задержкой

export function * vehiclesWatcher () {
  let getVehiclesTask;
  const requestChan = yield actionChannel(GET_VEHICLES_REQUEST);
  while (true) {
    yield take(requestChan);
    getVehiclesTask = yield fork(vehiclesFlow);
    yield take([CLEAR_VEHICLES_REQUEST]);
    yield cancel(getVehiclesTask);
  }
}

VehiclesFlow

function * vehiclesFlow () {
  try {
    while (true) {
      const accessToken = yield select(getToken);
      const searchBy = yield select(result);
      const id = yield select(getId);
      const vehicles = yield call(getAllVehicles, accessToken, id, searchBy);
      yield put ({type: GET_VEHICLES_SUCCESS, payload: vehicles});
      yield delay(5000);
    }
  } catch (error) {

  } finally {
    if (yield cancelled()) {
      yield put({type: CLEAR_VEHICLES_SUCCESS});
    }
  }
}

getAllVehicles

async function getAllVehicles (token, id, searchBy) {
  try {
    const res = await customAxios.post(`${API}/vehicle/getsorted?take=${15}`, 
      JSON.stringify({...searchBy, id }), configHeaders(token));
    return res.data;
  } catch (error) {
    throw error;
  }
}

Если пользователь щелкнет строку таблицы, новый компонент откроется в новая вкладка, и новый запрос сервера будет go.

Канал действий Redux-Saga для создания одного запроса в новой вкладке браузера

export function * vehicleWatcher () {
  const requestChan = yield actionChannel(GET_VEHICLE_REQUEST);
  while (true) {
    const { id } = yield take(requestChan);
    yield fork(vehicleFlow, id);
  }
}

Это мое родительское окно.

enter image description here

Если я нажму на строку таблицы в в то же время , когда ответ сервера был 401, я получу ответ 401 на новой вкладке, и мой запрос на получение маркера обновления не будет выполнен

enter image description here

Есть идеи, как это исправить? Как приостановить все саги, когда выполняются действия REFRESH_TOKEN_REQUEST / REFRESH_TOKEN_SUCCESS?

...