프론트엔드 연동

**Casbin.js**는 Casbin 스타일의 접근 제어를 프론트엔드에 도입합니다: 권한을 정의하고(예: 백엔드에서 가져옴) 이를 사용하여 UI를 표시/숨기거나 사용자를 라우팅합니다. 수동(manual) 모드(코드에서 권한 설정) 또는 자동(auto) 모드(API에서 가져오기)로 작동합니다.

설치

npm install casbin.js
npm install casbin

또는

yarn add casbin.js

프론트엔드 프레임워크

프레임워크	유형	작성자	설명
react-authz	React	Casbin	Casbin.js용 React 래퍼
rbac-react	React	@daobeng	Higher-Order Components, CASL 및 Casbin.js를 사용한 React에서의 역할 기반 접근 제어
vue-authz	Vue	Casbin	Casbin.js용 Vue 래퍼
angular-authz	Angular	Casbin	Casbin.js용 Angular 래퍼

빠른 시작

프론트엔드 애플리케이션에서 권한을 명시적으로 설정하기 위해 manual 모드로 Casbin.js를 구성하세요:

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()을 사용하여 권한을 확인할 수 있습니다. 두 메서드 모두 JavaScript Promise를 반환하므로(MDN 문서 참고), 결과를 처리하기 위해 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() 메서드는 동일하게 작동합니다:

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 매개변수는 쿼리가 오류 없이 완료되었음을 나타내며, 권한이 부여되었음을 의미하지는 않습니다. 마찬가지로, failed는 쿼리 오류와 관련되어 있으며, 권한 거부를 의미하지는 않습니다.

Casbin.js의 실제 사용 예제는 React 예제를 참조하세요.

Permission Object

Casbin.js는 방문자 권한을 표현하기 위해 JSON 객체를 사용합니다. 예를 들어:

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

이 객체는 방문자가 data1과 data2 객체를 모두 읽을 수 있지만, data1에만 쓸 수 있음을 나타냅니다.

Advanced Usage

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 ...
    }
});

백엔드에서는 프론트엔드를 위한 권한 객체를 생성하는 엔드포인트(예: REST API)를 노출합니다. 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()
}

노트

Currently, CasbinJsGetPermissionForUser is available only in Go Casbin and Node-Casbin. To request support in other languages, please open an issue or leave a comment below.

API Reference

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을 수행할 수 있는지 확인합니다.

Why Casbin.js

많은 분들이 Node-Casbin과 Casbin.js의 차이점에 대해 궁금해하십니다. Node-Casbin은 서버 수준에서 접근 제어를 관리하기 위해 배포되는 Node.js 환경용 Casbin의 핵심 구현체입니다. Casbin.js는 웹 페이지 사용자에게 클라이언트 사이드에서 Casbin 인증 로직을 적용하도록 돕는 프론트엔드 라이브러리입니다.

프론트엔드 인증을 위해 직접 Casbin 서비스를 구축하면 여러 가지 문제가 발생합니다:

1. 클라이언트가 연결될 때마다 enforcer가 초기화되고 백엔드 스토리지에서 모든 정책을 가져옵니다. 높은 동시성은 데이터베이스에 부담을 주고 상당한 네트워크 대역폭을 소모할 수 있습니다.
2. 모든 정책을 클라이언트에 노출하면 보안 취약점이 발생합니다.
3. 클라이언트와 서버 간의 강한 결합은 개발 및 유지보수를 복잡하게 만듭니다.

Casbin.js는 사용자 권한을 클라이언트 수준에서 관리함으로써 이러한 문제를 해결합니다. 핵심 기능은 fetch 작업을 통해 현재 사용자의 권한을 백엔드 Casbin 서비스와 동기화하는 것입니다. 권한 데이터를 가져오면 개발자는 Casbin.js 인터페이스를 사용하여 프론트엔드에서 사용자 동작을 제어할 수 있습니다.

이 방법은 반복적인 enforcer 초기화를 제거하고, 클라이언트와 서버 간 메시지 크기를 줄이며, 프론트엔드에서 모든 정책을 노출하지 않도록 합니다. 사용자는 접근 제어 모델이나 다른 사용자의 권한을 알지 못한 채 자신의 권한에만 접근할 수 있습니다. 또한 Casbin.js는 클라이언트와 서버의 인증 로직을 효과적으로 분리합니다.