프론트엔드 통합
정보
새로운 Backstage 설치로 시작하면 아래 코드 예시는 이미 구현되어 있어 실제 코드 변경이 필요하지 않아요.
출처: 문서
본문
정보
새로운 Backstage 설치로 시작하면 아래 코드 예시는 이미 구현되어 있어 실제 코드 변경이 필요하지 않아요.
이제 권한 정책을 작성하는 방법을 이해했으니, 프론트엔드의 인가 검사로 정책을 보완해야 하는 경우를 생각해 보겠어요.
대부분의 경우 다양한 플러그인 안에 있는 실제 기능은 플러그인 작성자가 이미 인가 뒤에 놓았을 거예요. 권한 백엔드는 권한 정책을 사용해 인가 결과를 반환하고, 플러그인 프론트엔드는 그에 따라 관련 UI 구성 요소를 보이게/숨기게/비활성화해요.
그러나 통합자가 프론트엔드에서 정책을 보완해야 하는 경우가 몇 가지 있어요. 한 가지 예는 앱 수준 라우팅이에요.
Backstage 권한 정책이 catalogEntityCreatePermission을 요청하는 사용자에게 DENY를 반환할 수 있다면, 예를 들어 /catalog-import 페이지에 대한 접근을 완전히 제거하는 것이 합리적일 수 있어요.
packages/app/src/App.tsx
import { RequirePermission } from '@backstage/plugin-permission-react';import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';const routes = ( <FlatRoutes> <Route path="/catalog-import" element={ <RequirePermission permission={catalogEntityCreatePermission}> <CatalogImportPage /> </RequirePermission> } /> {/* ... */} </FlatRoutes>);
이 변경으로 catalogEntityCreatePermission이 거부된 사용자는 이제 /catalog-import 페이지에 접근할 수 없게 돼요.