У меня возникли проблемы с потоком токенов 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);
}
}
Это мое родительское окно.
Если я нажму на строку таблицы в в то же время , когда ответ сервера был 401, я получу ответ 401 на новой вкладке, и мой запрос на получение маркера обновления не будет выполнен
Есть идеи, как это исправить? Как приостановить все саги, когда выполняются действия REFRESH_TOKEN_REQUEST / REFRESH_TOKEN_SUCCESS?