Frontend Usage

Casbin.js는 프론트엔드 애플리케이션에서 액세스 제어 관리를 용이하게 하는 Casbin 애드온입니다.

설치

npm install casbin.js
npm install casbin

또는

yarn add casbin.js

프론트엔드 미들웨어

미들웨어	유형	저자	설명
react-authz	React	Casbin	Casbin.js를 위한 React 래퍼
rbac-react	React	@daobeng	HOCs, CASL 및 Casbin.js를 사용한 React에서의 역할 기반 액세스 제어
vue-authz	Vue	Casbin	Casbin.js를 위한 Vue 래퍼
angular-authz	Angular	Casbin	Casbin.js를 위한 Angular 래퍼

빠른 시작

프론트엔드 애플리케이션에서 manual 모드를 사용하고 원하는 때에 권한을 설정할 수 있습니다.

const casbinjs = require("casbin.js");
// Set the user's permission:
// He/She can read `data1` and `data2` objects and can write `data1` object
const permission = {
    "read": ["data1", "data2"],
    "write": ["data1"]
}

// Run casbin.js in manual mode, which requires you to set the permission manually.
const authorizer = new casbinjs.Authorizer("manual");

이제 우리는 authorizer라는 권한 부여자를 가지고 있습니다. authorizer.can() 및 authorizer.cannot() API를 사용하여 권한 규칙을 얻을 수 있습니다. 이 2개의 API의 반환 값은 JavaScript Promises (자세한 내용은 여기)이므로 반환 값의 then() 메소드를 다음과 같이 사용해야 합니다:

result = authorizer.can("write", "data1");
result.then((success, failed) => {
    if (success) {
        console.log("you can write data1");
    } else {
        console.log("you cannot write data1");
    }
});
// output: you can write data1

cannot() API는 동일한 방식으로 사용됩니다:

result = authorizer.cannot("read", "data2");
result.then((success, failed) => {
    if (success) {
        console.log("you cannot read data2");
    } else {
        console.log("you can read data2");
    }
});
// output: you can read data2

위의 코드에서 매개변수의 success 변수는 요청이 오류를 발생시키지 않고 결과를 얻는 것을 의미하며, 권한 규칙이 true임을 의미하지는 않습니다. failed 변수 역시 권한 규칙과는 관련이 없습니다. 이는 요청 과정에서 무언가 잘못될 때만 의미가 있습니다.

Casbin.js의 실제 사용 사례를 보려면 우리의 React 예제를 참조하십시오.

권한 객체

Casbin.js는 JSON 객체를 받아 방문자의 해당 권한을 조작합니다. 예를 들어:

{
    "read": ["data1", "data2"],
    "write": ["data1"]
}

위의 권한 객체는 방문자가 data1과 data2 객체를 읽을 수 있으며, data1 객체만 쓸 수 있음을 보여줍니다.

고급 사용법

Casbin.js는 프론트엔드 접근 제어 관리를 백엔드 Casbin 서비스와 통합하는 완벽한 솔루션을 제공합니다.

Casbin.js Authorizer를 초기화할 때 auto 모드를 사용하고 엔드포인트를 지정하면, 권한을 자동으로 동기화하고 프론트엔드 상태를 조작합니다.

const casbinjs = require('casbin.js');

// Set your backend Casbin service URL
const authorizer = new casbinjs.Authorizer(
    'auto', // mode
    {endpoint: 'http://your_endpoint/api/casbin'}
);

// Set your visitor.
// Casbin.js will automatically sync the permission with your backend Casbin service.
authorizer.setUser("Tom");

// Evaluate the permission
result = authorizer.can("read", "data1");
result.then((success, failed) => {
    if (success) {
        // Some frontend procedure ...
    }
});

따라서, 권한 객체를 생성하고 프론트엔드로 전달하기 위한 인터페이스(예: RestAPI)를 노출해야 합니다. API 컨트롤러에서 CasbinJsGetUserPermission을 호출하여 권한 객체를 구성합니다. 다음은 Beego에서의 예시입니다:

노트

엔드포인트 서버는 다음과 같은 것을 반환해야 합니다

{
    "other":"other",
    "data": "What you get from `CasbinJsGetPermissionForUser`"
}

// Router
beego.Router("api/casbin", &controllers.APIController{}, "GET:GetFrontendPermission")

// Controller
func (c *APIController) GetFrontendPermission() {
    // Get the visitor from the GET parameters. (The key is "casbin_subject")
    visitor := c.Input().Get("casbin_subject")
    // `e` is an initialized instance of Casbin Enforcer
    c.Data["perm"] = casbin.CasbinJsGetPermissionForUser(e, visitor)
    // Pass the data to the frontend.
    c.ServeJSON()
}

노트

현재, CasbinJsGetPermissionForUser API는 Go Casbin과 Node-Casbin에서만 지원됩니다. 이 API가 다른 언어에서 지원되길 원하신다면, 이슈를 제기하거나 아래에 댓글을 남겨주세요.

API 목록

setPermission(permission: string)

권한 객체를 설정합니다. manual 모드에서 항상 사용됩니다.

setUser(user: string)

방문자 신원을 설정하고 권한을 업데이트합니다. auto 모드에서 항상 사용됩니다.

can(action: string, object: string)

사용자가 object에 대해 action을 수행할 수 있는지 확인합니다.

cannot(action: string, object: string)

사용자가 object에 대해 action을 수행할 수 없는지 확인합니다.

canAll(action: string, objects: Array<object>)

사용자가 objects의 모든 객체에 대해 action을 수행할 수 있는지 확인합니다.

canAny(action: string, objects: Array<object>)

사용자가 objects 중 하나에 대해 action을 수행할 수 있는지 확인합니다.

왜 Casbin.js인가

사람들은 Node-Casbin과 Casbin.js의 차이점에 대해 궁금해할 수 있습니다. 한마디로, Node-Casbin은 NodeJS 환경에서 구현된 Casbin의 핵심이며, 일반적으로 서버 끝에서 접근 제어 관리 툴킷으로 사용됩니다. Casbin.js는 클라이언트 측에서 웹페이지 사용자에게 Casbin을 사용하여 권한을 부여하는 데 도움을 주는 프론트엔드 라이브러리입니다.

일반적으로, 다음과 같은 문제로 인해 웹 프론트엔드 애플리케이션에서 직접 Casbin 서비스를 구축하고 권한 부여/강제 작업을 수행하는 것은 적절하지 않습니다:

1. 누군가 클라이언트를 켜면, 강제자가 초기화되고 백엔드 영구 계층에서 모든 정책을 끌어옵니다. 높은 동시성은 데이터베이스에 엄청난 압박을 가하고 많은 네트워크 처리량을 소비할 수 있습니다.
2. 모든 정책을 클라이언트 측에 로드하면 보안 위험이 발생할 수 있습니다.
3. 클라이언트와 서버를 분리하고 민첩한 개발을 촉진하는 것이 어렵습니다.

프론트엔드에서 Casbin을 사용하는 과정을 간소화하는 도구가 필요합니다. 실제로, Casbin.js의 핵심은 클라이언트 측에서 현재 사용자의 권한을 조작하는 것입니다. 당신이 언급한 것처럼, Casbin.js는 지정된 엔드포인트에서 가져오기를 수행합니다. 이 절차는 사용자의 권한을 백엔드 Casbin 서비스와 동기화합니다. 권한 데이터를 가지고 나면, 개발자들은 Casbin.js 인터페이스를 사용하여 프론트엔드 측에서 사용자의 행동을 관리할 수 있습니다.

Casbin.js는 위에서 언급한 두 가지 문제를 피합니다: Casbin 서비스는 더 이상 반복적으로 끌어올리지 않으며, 클라이언트와 서버 간의 메시지 전달 크기가 줄어듭니다. 우리는 또한 모든 정책을 프론트엔드에 저장하는 것을 피합니다. 사용자는 자신의 권한에만 접근할 수 있지만, 접근 제어 모델과 다른 사용자의 권한에 대한 지식은 없습니다. 게다가, Casbin.js는 권한 관리에서 클라이언트와 서버를 효율적으로 분리할 수도 있습니다.