NextJS에서 로그인 유지하기

현재 개발을 하다보니 로그인 후에 잠깐 로그인에 대한 상태가 초기화 되는 문제가 있었다.

 

정확히 말하자면 로그인은 되어있고, context에 상태가 정상적으로 저장되어있는데, 새로고침시 잠깐씩 isLogined가 false로 나오는 문제였다.

 

당황을 한 이유는 로그인이 되어 있지 않다면 로그인 페이지로 이동을 시켰는데, 정상적인 로그인이 되어 있어도 잠깐의 상태변화로 페이지 이동이 되어버리는 버그가 있었다.

 

그래서 상태는 잘 관리가 되고 있으니, 다른 페이지에서 token을 가지고 있는지 확인을 하여, 체크를 하는 방식을 끼워 넣었다.

일단 문제 없이 돌아가는데, 조금 지저분해보여서 추후에 수정을 해야겠다.

 

useEffect 부분에서 토큰이 존재하는지 체크하기로 했다.

export default function Home() {
  const router = useRouter();
  const { isLogined } = useContext(UserContext);

  useEffect(() => {
    const accessToken = getSessionStorage('accessToken') ?? null;

    if (accessToken) {
      const result = jwtVerfy(accessToken);
      if (!result.success) {
        allClearSessionStorage();
        router.push('/account');
      }
    } else {
      allClearSessionStorage();
      router.push('/account');
    }
  }, []);

  if (!isLogined) {
    return null;
  }
  return (