인프런 커뮤니티 질문&답변

저도 집필하는 동안 이 부분을 고민했습니다.

제가 생각하는 방식은

1.jwtUitl에서는 refreshJWT를 했을 때 잘못된 결과가 나오면 예외를 발생시킵니다.

const result = await refreshJWT(memberCookieValue.accessToken, memberCookieValue.refreshToken)

console.log("refreshJWT RESULT", result)

if(!result.accessToken || result.accessToken == 'undefined'
    || !result.refreshToken || result.refreshToken == 'undefined'){
  throw new Error('LOGIN_REQUIRE')
}

2. 각 화면에서는 catch( )를 이용해서 원하는 제어를 지정합니다.

const {moveToLogin} = useCustomLogin()

//serverData는 나중에 사용
const [serverData, setServerData] = useState(initState)


useEffect(() => {

  getList({page,size}).then(data => {
    console.log(data)
    setServerData(data)
  }).catch(err => {
    console.log("------------------------------")
    console.log("------------------------------")
    console.log("------------------------------")
    moveToLogin()
  })

}, [page,size, refresh])

이 부분을 공통으로 빼려면 어떻게 하는게 좋을까 고민했었는데요.. 우선은 jwtUtil은 문제가 발생했을때 예외를 발생하는 것이 맞고, API 서버의 호출시에 추가적인 작업을 할 수 있도록 하는 것이 좋다고 생각합니다.

예를 들어 todo API 호출시에 추가적인 콜백 처리를 하고

export const getListLogin = async ( pageParam , errHandlerr) => {

  const {page,size} = pageParam

  try {
    const res = await jwtAxios.get(`${prefix}/list`, {params: {page: page, size: size}})
    return res.data
  }catch(err) {
    errHandlerr()
  }
}

컴포넌트에서는 예외 발생시 이동을 지정하는 것이 무난할 듯 합니다.

const {moveToLogin} = useCustomLogin()

//serverData는 나중에 사용
const [serverData, setServerData] = useState(initState)


useEffect(() => {

  getListLogin({page,size}, moveToLogin).then(data => {
    console.log(data)
    setServerData(data)
  })

}, [page,size, refresh])