로그인 리다이렉트 처리 방법에 대해서

[chasj0326]

authRequired 인 모든 페이지에서 무조건 서버 데이터를 요청하게 되어있다는 사실을 망각해서 .. App.tsx 에서 요청을 한번씩 넣게 하자는 방법을 제안했었습니다!

하지만 배포 환경에서 확인해보니, member api 가 완성이 안된 상태라 리다이렉트가 제대로 동작하지 않기도 하고, 어차피 모든 페이지마다 데이터패칭이 발생해서 queryClient에서 처리하는 것만으로도 충분하다는 생각이 듭니다

따라서 useChekAuthRequired 에서는 요청 없이 스토리지 id 값만 확인하고, queryClient 401 처리에 모두 위임하는 것이 나을 것 같네요!
추가로, queryClient 에서 401 이 발생하면 setMemberId(null) 하는 것도 추가해야할 것 같아요 !

결론

useCheckAuthRequired 에서는 서버요청 없이 스토리지만 확인하자

queryClient 401 핸들링에 setMemberId(null) 추가하자

const useCheckAuthRequired = () => {
  const { authRequired } = useRouteData();
  const [memberId] = useLocalStorage<number | null>(
    STORAGE_KEYS.MEMBER_ID,
    null
  );
  const moveTo = useMoveRoute();

  useEffect(() => {
    if (authRequired && !memberId) {
      moveTo('join');
    }
  }, [memberId]);

};

const handleRedirectOnError = (error: CustomAxiosError) => {
  if (error.response?.status === 401) {
    router.navigate('/join');
  }
  localStorage.clearItem(STORAGE_KEYS.MEMBER_ID);
};

[bbearcookie]

오호!! 생각해보니 그렇네요!
수정 후 PR 작성하겠습니다!!