기본 권한에 따라 접근을 제한하는 보호 라우트(Protected Route)

[주인장]

export const DoctorsOnlyRoute = ({ element: Component }) => {
    return apiService.isDoctor() ? (
        Component
    ) : (
        <Navigate to={"/login"} />
    )
}

: DoctorsOnlyRoute는 의사 권한이 있는 사용자만 접근할 수 있도록 제어하는 보호 라우트

export const DoctorsAndPatientRoute = ({ element: Component }) => {

    return apiService.isAuthenticated() ? (
        Component
    ) : (
        <Navigate to={"/login"} />
    )
}

: 로그인한 모든 사용자가 접근할 수 있도록 제어하는 보호 라우트

- React Router에서 “권한에 따라 접근을 제한하는 보호 라우트(Protected Route)”를 만들기 위한 컴포넌트

element: Component 의미

- element라는 이름의 prop을 받아서

- 그 값을 Component라는 변수로 사용하겠다는 뜻 (구조 분해 할당 + 이름 변경)

- <DoctorsOnlyRoute element={<DoctorPage />} /> 형태로 사용