README 6.신경 쓴 부분_접근제한 설정

접근제한 설정

React Router의 개인 경로는 사용자가 경로를 방문할 수 있는 권한이 필요합니다. 이때 사용자가 특정 페이지에 대한 권한이 없으면 액세스할 수 없어야 합니다. 로그인해야 접근 가능한 페이지와 로그인을 하지 않은 경우 접근 가능한 페이지를 구분하기 위해 Private Router를 사용했습니다. PrivateRoutes라는 구성 요소를 만든 후 이를 사용해 사용자 권한 및 인증 상태를 확인합니다.

routes

authorization(인증)이 true일 경우 PrivateRoutes가 실행됩니다. 인증이 이루어지지 않은 경우에는 PrivateRoutesRev가 실행됩니다. 여기서 authorization는 리소스에 액세스할 수 있는 권한을 부여하는 프로세스, 즉 권한이 있는 유저인지 확인하는 절차입니다. PrivateRoutes와 PrivateRoutesRev일 때 실행되는 Route는 App.jsx에 정리되어 있습니다.

• privateRoutes.jsx

import { Navigate, Outlet } from 'react-router-dom';
        
const PrivateRoutes = ({ authorization }) => {
  return authorization ? <Outlet /> : <Navigate to='/' />;
};
        
export default PrivateRoutes;

• privateRoutesRev.jsx

import { Navigate, Outlet } from 'react-router-dom';
        
const PrivateRoutesRev = ({ authorization }) => {
  return authorization ? <Navigate to='/' /> : <Outlet />;
};
        
export default PrivateRoutesRev;