nextjs에서 401에러시 jwt accessToken재발급 질문있습니다.

Question

안녕하세요, nextjs에서 401에러시 토큰 재발급에관해서 방법이 여러가지인거를 알고있습니다.먼저 저희 회사는 fetch를 채택해서 사용하고있기때문에 fetch를 래핑해서 각각 clientAPI와 serverAPI로 구성해준 상태입니다.1. clientAPI는 axios가 인터셉터로 401에러시 재발급을하는 흔히하는 그런 코드 비슷하게 짜주었고 serverAPI는 ApiAuthErrorf라는 커스텀에러 래핑 클래스를 두고 401이뜰시 ApiAuthError에러에 담기게 해주고, client책임으로 넘기게했습니다.왜 이런형태가 되었느냐에는 배경이있습니다. 배경미들웨어에서 해주는것이 베스트고, 라우트핸들러에서 하는 방법또한 있는걸로 알고있습니다.하지만 라우트핸들러는 저는 nextjs approuter를 쓰고있고 rsc환경이되기때문에 Route Handler를 호출해도 Route Handler가 set한 쿠키는 브라우저로 전달되지 않아서, (Next 서버 → Next 서버로 Set-Cookie 헤더가 전달되므로) 라우트핸들러는 안되고,미들웨어는, 저희 프로젝트가 서버가 msa구조로 되어있기때문에 힘들다고 생각합니다.좀 더 덧붙여 말씀드리자면,클라이언트에서 서버에 여러 요청을 짧은 시간 내에 보내게 되면 각 미들웨어가 각자 리프레시를 시도하므로 하나를 제외한 모든 요청이 실패하고 리다이렉트 루프에 빠지고, 이 루프에서는 동시에 들어온 요청들 중 처음 빠져나가는 하나만 탈출할 수 있기 때문에, 이론상 최악의 경우 요청 n개가 O(n^2)개쯤으로 증식해 서버를 터뜨릴수있기때문입니다.2.그렇기때문에 serverAPI가 클라이언트로 401을 보내고 클라이언트에서 리스토어 api에 요청을보내 토큰 재발급을 받고 재요청을하는식의 방향으로 채택하게되었습니다. 이제 이거를 구현하는 과정에서 어떻게하면 좋을지 생각을하고 구현을해봤는데요 ..먼저 클라이언트 컴포넌트로 내지는 Refresh, Recovery쯤 되는 컴포넌트를 만들어, 내부적으로는 토큰 리프레시를 시도하고, 성공하면 새로고침, 실패하면 로그인 페이지로 튕기는 로직을 useEffect에서 마운트시 실행시킵니다. 이상해 보이지 않도록 외부에는 정중앙 정렬된 스피너를 하나 보여주게끔 합니다.그리고 ApiError를 상속받는, 또는 그냥 독립적인 AuthError 클래스를 만들어, serverApi가 요청 후 401을 응답받는 경우 ApiError 대신 AuthError를 던지게 합니다.그런 뒤, 서버 컴포넌트로 ProtectedRoute 컴포넌트를 만들어 children을 받게 합니다. 이 서버 컴포넌트는return { children } 을 try catch로 감싼 뒤, children에서 발생한 에러가 AuthError라면 를 렌더하고 아니라면 그냥 다시 던집니다. 코드로 보면 이런 느낌입니다. try { return { children } } catch (e) { if (e instanceof AuthError){ return } else throw e } 이렇게 하면 서버에서의 401 에러는 AuthRestore를 통해 클라이언트로 전파됩니다. AuthRestore에서는 원래 계획대로 처리되고요.근데 간과한게 ProtectedRoute로감싼 자식컴포넌트에서 401에러를띄우는게 대부분일텐데 이거를 ProtectedRoute가 어떻게 자식컴포넌트에서 띄우는 에러를 감지하느냐입니다.혹시 이외에도 어떤방법이있을까요?

정중식 · Answer

경우의 수가 너무 많네여 이 글은 삭제하겠습니다 어차피 답글도없으니..

nextjs에서 401에러시 jwt accessToken재발급 질문있습니다.

1개의 답변

#reactjs 목록