adminJS 튜토리얼 - 역할 기반 엑세스 제어 / 특징 (공식 사이트 번역)

역할 기반 액세스 제어

역할 기반 액세스 제어를 통해 애플리케이션은 리소스, 레코드 및 작업에 대한 액세스를 특정 사용자로만 제한할 수 있습니다. 이것은 AdminJS의 기능이 아니라 사용자 지정 코드를 사용하여 필요에 맞게 구성하는 방법입니다.

 

 

설정

인증된 라우터가 있는 플러그 및 어댑터로 앱을 설정해야 합니다. 이렇게 하면 AdminJS 구성 파일 전체에서 사용자 개체에 대한 액세스 권한이 부여됩니다. 사용자 개체가 이 TypeORM 모델과 비슷하다고 가정해 보겠습니다.

@Entity({ name: 'users' })
class User extends BaseEntity {
  @PrimaryGeneratedColumn()
  public id!: number;

  @Column()
  public email!: string;

  @Column()
  public role!: string;

  @Column()
  public password!: string;
}

 

인증된 라우터를 설정할 때 구성에 비동기 인증 기능이 있습니다. 이메일과 암호를 수신하고 위와 같이 일치하는 사용자 개체를 반환해야 합니다(또는 자격 증명이 유효하지 않은 경우 null).

 

 

사용자 관리

모든 암호는 데이터베이스에서 해시되어야 하며 절대 외부에 노출되지 않아야 합니다. 그러나 AdminJS는 어떤 모델의 어떤 필드를 이와 같이 처리해야 하는지 알지 못하므로 응답에서 수동으로 암호를 제거해야 합니다.

 

이것은 before과 after Hook을 사용하여 수행됩니다. 요청 및 응답 객체를 검사하고 모든 암호를 제거하거나 해싱하여 AdminJS에서 처리되기 전이나 후에 수정할 수 있습니다. 편집 작업의 after Hook가 두 번 호출됩니다. 처음에는 편집할 데이터를 가져오기 위해 GET으로(여기서 암호를 지워야 함) 데이터를 업데이트하기 위해 다시 POST로 호출됩니다(여기서는 새 암호를 해시해야 함). 또한 목록 작업은 레코드 목록을 반환하므로 암호를 제거하기 위해 레코드를 반복해야 합니다. 이것은 대부분의 액션 후크를 약간 다르게 만듭니다.

 

마지막으로 비밀번호 필드를 표시할 필요가 없는 보기에서 숨길 수 있습니다. 이는 속성의 isVisible 설정을 사용하여 수행됩니다. 이것은 UI 요소만 숨기고 AdminJS가 속성을 전송하는 것을 막지 않으므로 여전히 after Hook가 필요합니다.

const userResource: ResourceWithOptions = {
  resource: User,
  options: {
    actions: {
      new: {
        before: async (request) => {
          if (request.payload?.password) {
            request.payload.password = hash(request.payload.password);
          }
          return request;
        },
      },
      show: {
        after: async (response: RecordActionResponse) => {
          response.record.params.password = '';
          return response;
        },
      },
      edit: {
        before: async (request) => {
          // no need to hash on GET requests, we'll remove passwords there anyway
          if (request.method === 'post') {
            // hash only if password is present, delete otherwise
            // so we don't overwrite it
            if (request.payload?.password) {
              request.payload.password = hash(request.payload.password);
            } else {
              delete request.payload?.password;
            }
          }
          return request;
        },
        after: async (response: RecordActionResponse) => {
          response.record.params.password = '';
          return response;
        },
      },
      list: {
        after: async (response: ListActionResponse) => {
          response.records.forEach((record) => {
            record.params.password = '';
          });
          return response;
        },
      },
    },
    properties: {
      password: {
        isVisible: {
          list: false,
          filter: false,
          show: false,
          edit: true, // we only show it in the edit view
        },
      },
    },
  },
};

속성 논리 자습서에서 속성에 논리를 추가하는 방법에 대한 자세한 정보를 찾을 수 있습니다.

 

 

 

작업에 대한 액세스 제한

전체 작업에 대한 액세스 권한을 제거하려면 isAccessible 설정을 사용할 수 있습니다. 이렇게 하면 UI 요소가 제거되고 해당 특정 작업에 대한 모든 API 요청이 차단됩니다.

const someResource: ResourceWithOptions = {
  resource: Something,
  options: {
    actions: {
      new: {
        isAccessible: false,
      },
    },
  },
};

현재 사용자와 같은 컨텍스트에 따라 현재 수행된 작업에 액세스할 수 있는지 여부를 결정하는 함수를 전달할 수도 있습니다.

const someResource: ResourceWithOptions = {
  resource: Something,
  options: {
    actions: {
      new: {
        isAccessible: ({ currentAdmin }) => currentAdmin.role === 'admin',
      },
    },
  },
};

또는 기록 내용에 따라 특정 작업에 대한 액세스를 제한합니다. 이 모든 것은 사용자 지정 작업에도 적용됩니다.

const someResource: ResourceWithOptions = {
  resource: Something,
  options: {
    actions: {
      publish: {
        isAccessible: ({ record }) => !record.params.published,s
        // rest of the custom action code
      },
    },
  },
};

 

 

isAccessible과 isVisible의 차이점

두 설정 모두 UI에서 특정 작업을 숨기지만 isAccessible은 이 작업에 대한 API 호출도 차단합니다. 특정 작업에 대해 프로그래밍 방식으로 API 끝점을 호출하려는 사용자 지정 구성 요소가 있지만 사용자에게 표시하고 싶지 않은 경우 대신 isVisible을 사용하여 숨길 수 있습니다. 이는 트리거 뒤에 몇 가지 추가 논리가 있는 사용자 지정 작업에 종종 유용합니다.

 

 

특정 속성에 대한 엑세스 제한

기본적으로 AdminJS는 개체의 모든 속성을 표시하고 편집할 수 있습니다. listProperties, editProperties 등의 옵션을 사용하여 어느 정도 제어할 수 있지만 이렇게 하면 모든 사용자의 UI가 숨겨집니다. 사용자의 역할에 따라 이러한 속성을 숨기는 것은 조금 더 복잡합니다.

 

일반적으로 작업 구성 요소에 의해 렌더링되기 전에 리소스 개체를 캡처하고 이 특정 역할에 대해 표시되지 않아야 하는 모든 속성을 제거하려고 합니다. 데이터를 조정하고 기본 작업 구성 요소로 다시 전달하는 사용자 지정 작업 구성 요소를 생성하여 이를 수행합니다.

import React, { FC } from 'react';
import {
  ActionProps,
  BaseActionComponent,
  BasePropertyJSON,
  useCurrentAdmin,
} from 'adminjs';

const CustomAction: FC<ActionProps> = (props) => {
  const [currentAdmin] = useCurrentAdmin();
  const newProps = { ...props };
  
  // This is important - `component` option controls which custom
  // component is rendered by `BaseActionComponent` and we don't
  // want to render this code here again. That would create an
  // infinite loop.
  newProps.action = { ...newProps.action, component: undefined };

  // Configuration is stored in each property's custom props.
  const filter = (property: BasePropertyJSON) => {
    const { role } = property.custom;
    return !role || currentAdmin?.role === String(role);
  };

  // Since we want to remove properties from all actions, a common
  // filtering function can be used.
  const { resource } = newProps;
  resource.listProperties = resource.listProperties.filter(filter);
  resource.editProperties = resource.editProperties.filter(filter);
  resource.showProperties = resource.showProperties.filter(filter);
  resource.filterProperties = resource.filterProperties.filter(filter);

  // `BaseActionComponent` will now render the default action component
  return <BaseActionComponent {...newProps} />;
};

export default CustomAction;

위의 코드는 프런트엔드의 UI 요소를 숨기지만 API의 응답에는 여전히 숨겨진 모든 데이터가 포함됩니다. Postman과 같은 도구를 사용하여 숨겨진 데이터를 편집하는 것도 가능합니다. action Hook을 사용하여 패치할 수 있습니다.

 

다음은 모든 작업에 대해 일반화된 after Hook의 예입니다.

const roleAccessControlAfterHook = async (
  response: any,
  _: any,
  context: ActionContext,
) => {
  const { properties } = context.resource
    .decorate()
    .toJSON(context.currentAdmin);
  const targetRole = context.currentAdmin?.role;
  const propertiesToRemove = Object.entries(properties)
    .filter(
      ([_, { custom }]) => custom.role && String(custom.role) !== targetRole,
    )
    .map(([name]) => name);

  const cleanupRecord = (record: RecordJSON) => {
    propertiesToRemove.forEach((name) => delete record.params[name]);
  };
  if (response.record) {
    cleanupRecord(response.record);
  }
  if (response.records) {
    response.records.forEach(cleanupRecord);
  }
  return response;
};

 

해당 필드의 편집을 방지하기 위해 편집 및 새 작업의 후크 이전에 POST 요청에 대해 유사한 작업을 구현할 수 있습니다.

const roleAccessControlBeforeHook: Before = async (request, context) => {
  const { method, payload } = request;
  if (method !== 'post' || !payload) {
    return request;
  }
  const { properties } = context.resource
    .decorate()
    .toJSON(context.currentAdmin);
  const targetRole = context.currentAdmin?.role;
  const propertiesToRemove = Object.entries(properties)
    .filter(
      ([_, { custom }]) => custom.role && String(custom.role) !== targetRole,
    )
    .map(([name]) => name);
  propertiesToRemove.forEach((name) => delete payload[name]);
  return request;
};

 

새 작업의 경우 데이터베이스에서 필요한 경우 제한하는 필드의 기본값을 설정하는 후크 이전에 추가를 추가할 수 있습니다.

const defaultValuesBeforeHook: Before = async (request, context) => {
  const { payload, method } = request;
  if (method !== 'post' || !payload || context.action.name !== 'new') {
    return request;
  }
  const { properties } = context.resource
    .decorate()
    .toJSON(context.currentAdmin);
  Object.entries(properties).forEach(([name, { custom }]) => {
    if (custom.defaultValue && payload[name] === undefined) {
      payload[name] = custom.defaultValue;
    }
  });
  return request;
};

 

다른 리소스에서 이 기능을 재사용해야 하는 경우 기능으로 압축하는 것이 좋습니다.

const roleBasedAccessControl = buildFeature((admin) => {
  const CustomAction = admin.componentLoader.add(
    'CustomAction',
    './custom-action',
  );
  return {
    actions: {
      new: {
        component: CustomAction,
        before: [roleAccessControlBeforeHook, defaultValuesBeforeHook],
        after: [roleAccessControlAfterHook],
      },
      edit: {
        component: CustomAction,
        before: [roleAccessControlBeforeHook],
        after: [roleAccessControlAfterHook],
      },
      show: {
        component: CustomAction,
        after: [roleAccessControlAfterHook],
      },
      list: {
        component: CustomAction,
        after: [roleAccessControlAfterHook],
      },
    },
  };
});

 

마지막으로 이 구성은 특정 역할이 없는 사용자로부터 작업 구성에 지정된 속성을 숨깁니다.

const someResource: ResourceWithOptions = {
  resource: Something,
  features: [roleBasedAccessControl],
  options: {
    properties: {
      superSecretAdminProperty: {
        custom: {
          role: 'admin',
          defaultValue: 'a secret',
        },
      },
    },
  },
};