[React+TS] React에서 비로그인처리, PrivateRoute사용하기

시작하기 전

React에서 비로그인시, 또는 어떤 서비스를 쓰기 위한 제한이 있을때 PrivateRouter라는 커스텀 라우터를 사용해서 처리해줄 수 있다. 다른 방법도 있겠지만, 한꺼번에 관리할 때 편리한거 같아서 아직까지는 자주 사용 중 !

필자는 react + typescript를 사용했다. 그리고 redux도 사용한다.

 

본문

우선 기본적으로 세팅은 되어있겠지만 react-route-dom 설치가 필요하다 

npm i react-router-dom

 

그리고 기본 라우터가 세팅되어있다는 가정하에 진행할 예정이다.

 

1. 기본 라우터

우선 기본 세팅 되어있는 라우터는 다음과 같다.

Route.tsx

export default function Routes() {
  return (
    <BrowserRouter>
      <Header />
      <ReactRouterRoutes>
        <Route path="/" element={<Main />} />
        <Route path="/recommend" element={<Recommend />} />
        <Route path="/study">
          <Route index element={<StudyTotal />} />
          <Route path="management" element={<Management />} />
        </Route>
      </ReactRouterRoutes>
    </BrowserRouter>
  );
}

 

이렇게 세팅되어있는 라우터에서 이제 하나씩 차근차근 수정해준다.

 

2. PrivateRoute 파일 만들기

우선 PrivateRoute.tsx 파일 생성해주기!

그리고 안에 분기 처리할 내용을 세팅해준다 

function PrivateRoute({outlet}:PrivateRouteProps) {
  const check  = useSelector(state => auth.check);
  const toast = useToast();
 
  // 로그인x 
  if (!check) {
    toast({ title: "로그인 해주세요!", position: "top", duration: 1000 });
    return <Navigate to="/" />;
  }
 
  return outlet;
}
 
 
export default PrivateRoute;

위 코드는 redux에서 로그인 여부를 가져와서(check변수, boolean 값으로 로그인시 true) 로그인을 했는지 확인해준다.

그리고 toast는 지금 UI라이브러리를 사용하고 있기 때문에 있는것으로 알림 메시지를 띄워주는거라고 생각하면 된다. 

메시지창을 띄워준 후에는 "/" 경로로 라우팅 시켜준다.

 

만약, 로그인이 되어 있다면 outlet, 즉 기존에 가려고 했던 컴포넌트를 반환해준다. 그냥 가려고 한 경로로 라우팅 해준다는 뜻이다. 

이런식으로 간단하게 세팅을 먼저해준다.

 

PrivateRouteProps에는 인자들의 타입을 세팅해주면 됩니다.

 

3.  라우터 수정해주기

그리고 이제 기존에 있던 라우터에 가서 제한이 필요한 라우터들을 수정해준다 .

<기존>

<Route path="/recommend" element={<Recommend />} />

 

<수정 후>

<Route path="/recommend" 
	element={<PrivateRoute outlet={<Recommend />}/>

 

이렇게 수정해주면 된다. 

 

그리고 나는 로그인 여부를 항상 PrivateRoute가 아닌 Route에서 한번 요청하고 인자로 넘기고 싶어서 그렇게 구현했다. 

export default function Routes() {
  const auth = useAppSelector(state => state.auth);
 
  return (
    <BrowserRouter>
      <Header />
      <ReactRouterRoutes>
        <Route path="/" element={<Main />} />
        <Route
          path="/recommend"
          element={<PrivateRoute auth={auth} outlet={<Recommend />} />}
        />
        <Route path="/study">
          <Route
            index
            element={<PrivateRoute auth={auth} outlet={<StudyTotal />} />}
          />
          <Route
            path="management"
            element={<PrivateRoute auth={auth} outlet={<Management />} />}
          />
        </Route>
      </ReactRouterRoutes>
    </BrowserRouter>
  );
}

 

타입까지 적용한 PrivateRoute.tsx

export type PrivateRouteProps = {
  auth: InitialStateType;
  outlet: JSX.Element;
};
 
function PrivateRoute({ auth, outlet }: PrivateRouteProps) {
  const { check } = auth;
  const toast = useToast();
 
  // 로그인x
  if (!check) {
    toast({ title: "로그인 해주세요!", position: "top", duration: 1000 });
    return <Navigate to="/" />;
  }
 
  return outlet;
}
 
export default PrivateRoute;