https://mbti-test-orcin.vercel.app/
로그인 이후 시간이 지났을 때 accessToken으로 유저 정보를 받아오는 페이지에서 401(unauthorized) 에러가 났다.
코드에서 accessToken을 localStorage에 저장했기에 로컬스토리지를 확인해보니 accessToken이 잘 있었지만 에러가 났기에 구글링해보며 에러에 대해 알아보았다. 찾아본 결과 accessToken이 만료되서 발생한 에러 같았다. 그래서 로그아웃 이후 다시 로그인해서 유저 정보 페이지에 가보니 에러없이 잘 동작했기 때문에 이전에 발생한 에러는 내가 로그인할 때 저장한 accessToken이 만료돼서 발생했다는 것을 알 수 있었다.
그래서 accessToken이 만료돼서 에러가 뜨면 만료되었다는 알림창과 함께 로그인 페이지로 이동하도록 하면 좋을 것 같다고 생각했다. 유저 정보는 useQuery로 받아오고 있었기에 useQuery의 query state 중 isError를 사용해서 isError가 true면 토큰이 만료되었다는 alert창을 띄우고 로그인페이지로 return 해주었다.
const { data, isPending, isError } = useQuery({
queryKey: ["userData"],
queryFn: () => getUserProfile(token),
retry: false,
});
...
if (isError) {
alert("토큰이 만료되었습니다. 다시 로그인 해주세요");
localStorage.removeItem("accessToken");
return <Navigate to="/login" />;
}결과 화면
