Автоматическая ручка 401 ответ с редукцией-сагой и выборкой

Question

Я создаю «защищенное» приложение и используя саму саму сапу вместе с fetchjs для выполнения асинхронных вызовов на бэкэнд.

My backend возвращает код состояния 401, когда пользователь не авторизован, я хочу поймать это «исключение» в глобальном масштабе и отправить действие, чтобы мое приложение реагирования перешло на экран входа в систему.

Я нашел следующее решение: https://github.com/redux-saga/redux-saga/issues/110, но в этом случае обработка для 401 должна быть явной в каждой саге, которую мы строим.

Добавляя код в каждую сагу, он становится более сложным. Это также увеличивает шансы разработчика забыть добавить код для обработки кода 401.

Есть ли хороший способ справиться с этим ответом 401 по всему миру?

Answer 1

Я не использовал бы redux-saga, так как он не имеет возможности выполнять то, что вам нужно.

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

Образец уровня API, который сообщает, вызывает обработчик ошибок.

const conf = { 
    onError:() => {}, 
} 

api.onError = (cb) => { 
    conf.onError = cb; 
} 

api.get = (url) => { 
    fetch(url) 
     .then(response => { 
      if (response.ok === false) { 
       return conf.onError(response); 
      } 
      return response; 
     }) 
     // Network error 
     .catch(conf.onError) 
} 

Настроить приложение.

import store from './store'; 

// Configure your API wrapper and set error callback which will be called on every API error. 
api.onError((error) => { 
    store.dispatch({ 
     type: 'API_ERROR', 
     payload: error, 
    }); 
}); 

// In you reducers... 
isAuthorized(state, action) { 
    if (action.type === 'API_ERROR' && action.payload.statusCode === 401) { 
     return false; 
    } 
    return state; 
} 

Затем вызов API, как обычно, если происходит ошибка, действие отправляется для хранения и вы можете или не можете реагировать на это действие.