2017-01-22 1 views
1

나는 "보안 된"응용 프로그램을 구축하고 redux-saga를 fetchjs와 함께 사용하여 백엔드에 대한 비동기 호출을 수행합니다.redux-saga 및 가져 오기와 자동 응답 401 응답

내 백엔드는 사용자가 승인되지 않았을 때 401 상태 코드를 반환합니다.이 "예외"를 전역으로 포착하고 조치를 보내어 내 반응 응용 프로그램이 로그인 화면으로 이동하도록하고 싶습니다.

다음 해결책을 찾았습니다 : https://github.com/redux-saga/redux-saga/issues/110 그러나이 경우 401의 처리는 우리가 구축 한 모든 사가에서 명시 적이어야합니다.

모든 사가에 코드를 추가하면 더 복잡해집니다. 또한 개발자가 401 코드를 처리하기위한 코드를 추가하는 것을 잊어 버릴 확률이 높아집니다.

이 401 응답을 전체적으로 처리하는 좋은 방법이 있습니까?

답변

2

나는 당신이 필요로하는 것을 할 능력이 없기 때문에 나는 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를 호출하십시오. 오류가 발생하면 조치가 상점에 전달되고이 조치에 대해 반응 할 수도 있고 그렇지 않을 수도 있습니다.