Как создать Middleware для refre sh токена в Reactjs с топором ios и redux

Question

я работаю с reactjs на внешнем интерфейсе, проблема заключается в том, что по истечении определенного периода времени истек срок доступа accessToken и состояние отправки сервером 401 (не авторизовано), затем мне нужно отправить токен refre sh обратно на сервер, пока он работает нормально Я вручную отправляю токен refre sh. Я устанавливаю функцию setInterval, но это не очень хороший способ, как автоматически отправлять его по истечении срока действия токена. Я тоже Google, но все говорят о создании промежуточного программного обеспечения, кто-нибудь, пожалуйста, дайте мне подсказку, как создать это промежуточное программное обеспечение или любое другое решение или ссылку на любую статью, связанную с ним. Я создал это, но это не работает для меня, однако, когда сервер отправляет статус 401, затем промежуточное программное обеспечение запускается, но оно не отправляет мою функцию refreshToken ()

const customMiddleWare = store => next => action => {
  axios.interceptors.response.use(function (response) {
    return response;
  }, function (error) {
    if(error.status === 401) {
      // do something when unauthorized
      store.dispatch(refreshToken());
    }
    return Promise.reject(error);
  });
  console.log("Middleware triggered:", action);
  next(action);
}

Кстати, я использую Redux, Redux-Thunk и Axe ios. спасибо,

Answer 1

некоторое время go я использовал следующий способ:

Прежде всего, я создал некоторую папку API, где каждая функция возвращает данные для топора ios запросов

// /api.js

export function signIn (data) {
  return {
    method: 'post',
    api: '/sign-in'
    data: data
  }
}

export function signUp (data) {
  return {
    method: 'post',
    api: '/registration'
    data: data
  }
}

затем я сгенерировал тип действия по указанному c правилу, например: SIN_IN_REQUEST, где: SIGN_IN означает функцию входа в /api.js; ЗАПРОС означает, что вам нужно сделать запрос API. В результате мое промежуточное программное обеспечение выглядело следующим образом:

// request middleware

const instance = axios.create({
  baseURL: '/api'
});

function camelize(str) {
  return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index) {
    return index === 0 ? word.toLowerCase() : word.toUpperCase();
  }).replace(/\s+/g, '');
}

const customMiddleWare = store => next => action => {
  if (!action.type.endsWith('_REQUEST')) {
    next();
    return;
  }

  const methodName = action.type.replace('_REQUEST', ''); // removed _REQUEST from action type
  const camelCaseMethodName = camelize(methodName); // the result is "signIn"
  const method = api[camelCaseMethodName];

  if (!method) {
    next();
    return;
  }

  const dataForRequest = method(action.payload);

  try {
    const response = await instance(dataForRequest);

    const newActionType = action.type.replace('_REQUEST', '_SUCCESS');

    dispatch({
      type: newActionType,
      payload: {
        requestPayload: action.payload,
        response: response,
      }
    })
  } catch(error) {
    if (error.status === '401') {
      dispatch(refreshToken());
      next();
      return;
    }

    const newActionType = action.type.replace('_REQUEST', '_FAILURE');
    dispatch({
      type: newActionType,
      payload: {
        requestPayload: action.payload,
        error: error,
      }
    })
  }

  next();
}

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

function someTHunkMethod(username, password) {
  return (dispatch, getState) => {
    dispatch({
      type: 'SIGN_IN_REQUEST',
      payload: {
        username,
        password
      }
    })
  }
}

function oneMoreThunk(data) {
  return (dispatch, getState) => {
    dispatch({
      type: 'GET_USERS_REQUEST',
      payload: data
    })
  }
}

А в редукторе сделать что-то подобное

...

switch (action.type) {
    case 'SIGN_REQUEST':
      return {
        isLoading: true,
        user: null
      }
    case 'SIGN_SUCCESS':
      return {
        isLoading: false,
        user: action.payload.response.data
      }
    case 'SIGN_FAILURE':
      return {
        isLoading: false,
        user: null
      }
    default:
      return state
  }