[💁🏻‍♀️ mbti 테스트 만들기] 토큰 만료 이슈... 😵‍💫

프로젝트를 진행하던 중 프로필 조회에서 갑자기 오류가 발생했다. 

 

오류

네트워크 탭에서 확인한 오류 원인은 토큰 만료 이슈..! 

 

토큰 만료 시간을 확인해 보니.. 1시간인 것을 확인했다... 

만료 시간이 1시간인 것을 확인

 

해결 과정...

우선 빠른 테스트를 위해 토큰을 1분짜리 발급하도록 했다.

export const login = async (userData) => {
  return await authInstance.post("/login?expiresIn=1m", userData);
};

 

처음 생각한 해결 방법은 응답이 status 가 401 인 경우 로그아웃 처리하고 로그인 페이지로 돌리면 되겠지 했는데, 다른 오류도 다 401을 주고 있었다.

그러면 응답으로 "토큰이 만료되었습니다. 다시 로그인 해주세요." 라는 메세지를 주고 있으니 오류 메세지가 이와 같으면 처리하도록 하려고 했는데 tanstack query 로 호출 시 오류 발생 시 .. error 에 에러메세지가 있어야될 것 같은데 null 이다..(?) 이거로는 해결을 못하겠군.. 패스..

 

다음 방법은 해당 문서에 나와 있는 대로 axios 로 호출 후 catch 로 잡아서 처리해 볼 지 생각했는데, 저렇게 할 경우 모든 api 요청하는 곳마다 처리를 해주어야 해서 중복코드가(회원 정보 조회, 프로필 수정 등) 생긴다. 그래서 이 방법도 시도해보다가 패스..

/** 회원정보 조회 */
export const getUserProfile = async (token) => {
  return await authInstance.get("/user", {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });
  // 여기서 처리할까 생각했음
  // .catch((error) => {
  //   console.log(error.response.data.message);
  // });
};

/** 프로필 수정 */
export const updateProfile = async ({ nickname, token }) => {
	... 생략
};

 

다음 생각한 방식은 axios interceptor 이다. 

const authInstance = axios.create({
  baseURL: "https://moneyfulpublicpolicy.co.kr",
});

authInstance.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if (
      error.response.data.message ===
      "토큰이 만료되었습니다. 다시 로그인 해주세요."
    ) {
      const { persist } = useUserStore();
      const navigate = useNavigate();
      persist.clearStorage();
      
      navigate(HOME);
    }
    return Promise.reject(error);
  }
);

위와 같이 인터셉터에서 하면 회원 정보 조회, 프로필 조회할 때 공통으로 처리를 할 수 있다. 하지만 문제가 생겼는데.. useNavigate 같은 리액트 훅은 반드시 React 컴포넌트 함수 내에서 호출되어야 한다는 것...  비동기 함수 혹은 React 컴포넌트 외부에서는 사용할 수 없다고한다. 

 

그러면.. 훅을 사용하지 않고 처리하는 방법을 알아보다가..

아래와 같은 방법으로 시도했다.

const authInstance = axios.create({
  baseURL: "https://moneyfulpublicpolicy.co.kr",
});

authInstance.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if (
      error.response.data.message ===
      "토큰이 만료되었습니다. 다시 로그인 해주세요."
    ) {
      localStorage.removeItem("userInfo"); // 로컬 스토리지에서 데이터 삭제
      alert("로그인 기간이 만료되었습니다. 다시 로그인해주세요.");
      window.location.href = HOME;
    }

    return Promise.reject(error);
  }
);

이게 최선... 인줄 알았는데 이 방식에도 문제가 있다. 사실 navigate 냅두고   window.location.href = HOME; 를 사용한 것도 찝찝했지만 더 큰 문제는, 사용하는 API 중 json server 을 사용하는 test 관련 API 는 요청 시 토큰을 주지 않는다. 하지만 회원 관련 API 는 요청 시 토큰을 헤더에 넣어서 요청하기 때문에, 화면에서 탭 이동 시 프로필 화면에서는 토큰 오류가 발생하고 테스트 관련 페이지에서는 오류가 발생하지 않는 상황. 

 

그래서 고민끝에 프로필 관련 API 에서 토큰 오류가 발생하면 테스트 API 에도 영향이 가도록 변경을 하였다.

 

그 위치는 ProtectedRoute 이다. 프로필과 테스트 페이지는 로그인한 유저만 접근이 가능하기때문에 이 곳에서 로그인 안했으면 로그인 화면으로 리다이렉트해준다. 프로필 페이지와 테스트페이지는 이곳을 무조건 거치기 때문에 이곳에서 처리를 하면 된다.

어떻게? 로그인 되어있으면 유저 정보 안에 있는 토큰으로 회원 조회를 하고 토큰 오류가 발생하면 로그아웃 & 로그인 페이지로 이동시키기

const ProtectedRouts = () => {
  const { user, isLogin, setIsLogin, setUser, pageType } = useUserStore();
  const navigate = useNavigate();
  const clearUserIdStorage = useUserStore.persist.clearStorage;

  /**
   * 로그인 했을 경우, 새로고침하면 이 로직이 작동
   * -> 회원 정보 조회해서 토큰 유효한지 판단
   * -> 오류 발생하면 로그아웃 처리 후, 로그인 페이지로 이동
   */
  useEffect(() => {
    const getUser = async () => {
      if (isLogin) {
        try {
          await getUserProfile(user.accessToken);
        } catch (error) {
          setUser(null);
          setIsLogin(false);
          clearUserIdStorage();
          navigate(SING_IN);
        }
      }
    };
    getUser();
  }, []);

  /** 로그인이 안된 상태이면 -> 로그인 페이지로 보내기 */
  if (!isLogin) {
    alert("로그인 후 이용해주세요.");
    return <Navigate to={SING_IN} replace />;
  }

  return <Outlet />;
};

근데.... 이것 역시 문제가 있다. useEffect  로 인해서 페이지 한번 이동하고 나서 다른 페이지 이동시 동작을 안 한다!! ㅜㅜ 각 페이지마다 리랜더링을 해줄 트리거가 필요하다.

 

그래서 header 에서 페이지 이동할 때마다 pageType 상태를 주어서 ProtectedRouts 가 리랜더링이 되어서 useEffect 를 다시 실행하도록 했다.

const Header = () => {
	... 생략

  return (
    <header>
    
    ... 생략
    
        {user ? (
          <div className="flex gap-10">
            <span className="text-black">{user.nickname}</span>
            <button
              onClick={() => {
                setPageType("Profile");
                navigate(PROFILE);
              }}
            >
              프로필
            </button>
            
            ... 생략

  
          </div>
        ) : (
          <Link to={SING_IN}>로그인</Link>
        )}
      </div>
    </header>
  );
};

export default Header;

페이지 이동 할때마다 setPageType("Profile") 와 같이 pageType 를 설정해서 리랜더링이 일어나도록 했다...

 

const ProtectedRouts = () => {
  const { user, isLogin, setIsLogin, setUser, pageType } = useUserStore();
  const navigate = useNavigate();
  const clearUserIdStorage = useUserStore.persist.clearStorage;

  useEffect(() => {
    const getUser = async () => {
      if (isLogin) {
        try {
          await getUserProfile(user.accessToken);
        } catch (error) {
	...생략
        }
      }
    };
    getUser();
  }, [pageType]);


	... 생략

  return <Outlet />;
};

useEffect 에는 pageType 의존하도록 했다. 

 

일단.. 원하는 동작대로 해결은했다.. 하지만 이것저것 시도하고 코드 수정하고 하니까 괜히 꼬인 느낌이고 찝찝한 기분이 든다. 처음부터 설계를 잘했다면.. 좋았을 텐데 아쉬움이 있다.

 

이 이슈를 완벽하게 해결했다..? ❌ 아니다. 하지만 내가 처음 설계한 구조에서 최대한 해결해 볼 수 있는 방법으로 어느 정도 해결했다고 본다. 

처음으로 로그인, 회원가입, 권한 처리, 토큰 처리, 새로고침 전부 다 하면서 느낀 것은.. 프론트단에서 고려해야 할 상황이 굉장이 많다는 것을 느꼈다.. 

어렵고 머리 터지는 프로젝트였다.. 나중에 다시 이 프로젝트를 봤을 때는 어디서부터 잘못됐는지 깨닫는 순간이 오면 좋겠다.