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

안녕하세요. hocs 관련해서 질문하나 남깁니다. 강사님께서 새롭게 진행해주신 refreshtoken이후의 로그인 체크를 통해, 진행하던 중 질문이 생겨 여쭙습니다.

문제점 : loginUser를 통해 로그인을 진행한 후 logoutUser을 통해 로그아웃을 한 뒤 로그인 창으로 돌아와 새로고침을 누르고 로그인을 하려고 하면 hocs에서 막히게 됩니다.

로그인 > 로그아웃 > 새로고침 > 재로그인(hocs 오류)

로그를 찍으며 확인을 해보니

첫 로그인 당시 로그

첫 로그인 성공 후 로그

로그아웃 후 새로고침 시 로그

여기서 문제가 발생합니다. recoil store에서 공유하고 있는 restoreAccessTokenLoadable 함수가 로그아웃 후 새로고침을 하면 undefined을 반환을 합니다. 이후 withauth에서도 promise가 반환되지 않아서 로그인권한 오류가 발생하고 있습니다.

현재 restoreAccessTokenLoadable 코드입니다

export const restoreAccessTokenLoadable = selector({
    key: "restoreAccessTokenLoadable",
    get: async () => {
        const newAccessToken = await getAccessToken();
        console.log(newAccessToken, "restoreaccess 결과입니다");
        return newAccessToken;
    },
});

해결 방법이 있을까요??

혹시 몰라 다른 부분 코드도 첨부합니다

withauth (로그인체크권한)

useEffect(() => {
   console.log("withauth가 실행되었습니다");
   void aaa.toPromise().then((newAccessToken) => {
     console.log(newAccessToken, "withauth결과입니다");
     console.log(aaa);
     if (newAccessToken === undefined) {              alert("로그인 후 이용가능합니다.");
                    void router.push("/section30/30-01-login-refreshtoken");
                }
            });
        }, []);

apollo에서 useEffect부분

const [accessToken, setAccessToken] = useRecoilState(accessTokenState);
    const aaa = useRecoilValueLoadable(restoreAccessTokenLoadable);

useEffect(() => {
  void aaa.toPromise().then((newAccessToken) => {
   setAccessToken(newAccessToken ?? "");
});
    }, []);

입니다 감사합니다.