로그인시 접근 가능한 라우팅 구현(react guard route)

로그인이 되있어야 페이지에 접근이 가능하도록 라우팅을 하고 싶었다.

 

 

처음에 해본 시도

 // App.tsx
 
 <Route element={<LoginIsRoute />}>
    {/* 홈 */}
    <Route
      path="/"
      element={
        <LayoutWithHeader>
          <HomePage />
        </LayoutWithHeader>
      }
    />
</Route>




// LoginIsRoute.tsx

const LoginIsRoute = () => {
  const navigate = useNavigate(); 

  useEffect(() => { 
    if (isLogin) { navigate('/auth'); } 
  }, [isLogin, navigate]); 

  return ( …. 코드 생략 );
}

 

따로 커밋을 해두지 않아서 정확한 코드는 기억이 안나지만
한번 마운트후에 로그인이 되어있지 않으면 로그인하는 페이지로 리다이렉트 되도록 했다.

 

 

🚨 하지만 문제점 발생.

이때 한번 마운트를 하고 로그인 유무 판단이 진행이 되서 그런지 
api 요청이 이미 진행된 후 콘솔에 에러가 떴다.
직접적으로 화면단에서 에러가 발생하는건 아니였지만 굳이 로그인이 되지 않았는데 쓸데없이 api가 요청가고있는게 거슬렸다.

그래서 여러가지 코드를 실행해봤지만,,,
계속 api 요청이 갔다,,,

결국 멘토님께 SOS,,,

 

리액트 라우터 가드(React router guard)로 접근 제한 가능한 컴포넌트를 만들 수 있다고 하셨다.
특정 조건을 충족하지 못할경우 접근 제한을 막는 라우팅 방법이다.
폭풍 검색후 내 프로젝트랑 맞는 코드를 찾아서 바로 실행!!

// GuardedRoute.tsx

import { Navigate, Outlet } from 'react-router-dom';
import useUserState from './hooks/recoil/useUserState';

const GuardedRoute = () => {
  const { userState } = useUserState();

  return userState.isLogin ? <Outlet /> : <Navigate to="/auth" />;
};

export default GuardedRoute;

 

위의 코드로 실행을 했더니
로그인이 안되어 있으면 바로 auth 페이지로 리다이렉트를 해줬다.
기존에 api 요청되던것도 더이상 실행되지 않았다.