Frontend Integration

Casbin.js brings Casbin-style access control to the frontend: define permissions (e.g. from your backend) and use them to show/hide UI or route users. It works in manual mode (you set permissions in code) or auto mode (fetch from an API).

インストール

npm install casbin.js
npm install casbin

または

yarn add casbin.js

Frontend Frameworks

Framework	タイプ	著者	説明
react-authz	React	Casbin	Casbin.jsのためのReactラッパー
rbac-react	React	@daobeng	Role-Based Access Control in React using Higher-Order Components, CASL, and Casbin.js
vue-authz	Vue	Casbin	Casbin.jsのためのVueラッパー
angular-authz	Angular	Casbin	Casbin.jsのためのAngularラッパー

クイックスタート

Configure Casbin.js in manual mode to set permissions explicitly in your frontend application:

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");

With an authorizer instance, you can check permissions using authorizer.can() and authorizer.cannot(). Both methods return JavaScript Promises (see MDN documentation), so use the then() method to handle results:

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

The cannot() method works identically:

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

The success parameter indicates that the query completed without errors—not that permission was granted. Similarly, failed relates to query errors, not permission denial.

See our React example for practical Casbin.js usage.

許可オブジェクト

Casbin.js uses a JSON object to represent visitor permissions. 例えば：

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

This object indicates that the visitor can read both data1 and data2 objects but can only write to data1.

高度な使用法

Casbin.js provides seamless integration between frontend access control and your backend Casbin service.

Use auto mode and specify your backend endpoint when initializing the Casbin.js Authorizer. It will automatically synchronize permissions and manage frontend authorization state:

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

On the backend, expose an endpoint (such as a REST API) that generates the permission object for the frontend. APIコントローラーで CasbinJsGetUserPermission を呼び出して、許可オブジェクトを構築します。 This Beego example demonstrates the pattern:

メモ

Your endpoint should return a response like:

{
    "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)

Sets the permission object. Used primarily in manual mode.

setUser(user: string)

Sets the visitor identity and refreshes permissions. Used primarily in auto mode.

can(action: string, object: string)

Checks if the user can perform action on object.

cannot(action: string, object: string)

Checks if the user cannot perform action on object.

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

Checks if the user can perform action on all objects in objects.

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

Checks if the user can perform action on any object in objects.

なぜCasbin.jsなのか

People often wonder about the distinction between Node-Casbin and Casbin.js. Node-Casbin is Casbin's core implementation for Node.js environments, typically deployed at the server level for access control management. Casbin.js is a frontend library that helps you apply Casbin authorization logic at the client side for webpage users.

Directly building a Casbin service for frontend authorization presents several issues:

1. When a client connects, the enforcer initializes and pulls all policies from backend storage. High concurrency can strain databases and consume significant network bandwidth.
2. Exposing all policies to clients creates security vulnerabilities.
3. Tight coupling between client and server complicates development and maintenance.

Casbin.js addresses these challenges by managing user permissions at the client level. The core functionality involves synchronizing the current user's permissions with the backend Casbin service through a fetch operation. Once permission data is retrieved, developers can use Casbin.js interfaces to control user behavior at the frontend.

This approach eliminates repeated enforcer initialization, reduces message size between client and server, and avoids exposing all policies at the frontend. Users access only their own permissions without knowledge of the access control model or other users' permissions. Additionally, Casbin.js effectively decouples client and server authorization logic.