Frontend Usage

Casbin.js هو إضافة Casbin التي تسهل إدارة التحكم في الوصول في تطبيق الواجهة الأمامية.

التثبيت

npm install casbin.js
npm install casbin

أو

yarn add casbin.js

وسطاء الواجهة الأمامية

وسيط	النوع	المؤلف	الوصف
react-authz	React	Casbin	مُغلف React لـ Casbin.js
rbac-react	React	@daobeng	التحكم في الوصول بناءً على الأدوار في React باستخدام HOCs، CASL و Casbin.js
vue-authz	Vue	Casbin	مُغلف Vue لـ Casbin.js
angular-authz	Angular	Casbin	مُغلف Angular لـ Casbin.js

بداية سريعة

يمكنك استخدام الوضع 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(). قيم الإرجاع لهذه الواجهتين البرمجيتين هي وعود JavaScript (تفاصيل هنا)، لذا يجب استخدام الطريقة 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 في المعاملات يعني أن الطلب يحصل على النتيجة دون إلقاء خطأ ولا يعني أن قاعدة الإذن هي true. المتغير failed أيضًا غير مرتبط بقواعد الإذن. يكون ذو معنى فقط عندما يحدث خطأ ما في عملية الطلب.

يمكنك الرجوع إلى مثال React لرؤية استخدام عملي لـ Casbin.js.

كائن الإذن

Casbin.js سيقبل كائن JSON للتلاعب بالإذن المقابل لزائر. على سبيل المثال:

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

كائن الإذن أعلاه يظهر أن الزائر يمكنه read الكائنات data1 و data2، بينما يمكنهم فقط write الكائنات data1.

استخدام متقدم

Casbin.js يوفر حلاً مثاليًا لدمج إدارة التحكم في الوصول للواجهة الأمامية مع خدمة Casbin الخلفية.

استخدم الوضع auto وحدد نقطة النهاية الخاصة بك عند تهيئة Authorizer Casbin.js، سيتم مزامنة الإذن تلقائيًا والتلاعب بحالة الواجهة الأمامية.

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 مدعومة فقط في Go Casbin و Node-Casbin. إذا كنت تريد دعم هذه الواجهة البرمجية في لغات أخرى، يرجى طرح مشكلة أو ترك تعليق أدناه.

قائمة API

setPermission(permission: string)

تعيين كائن الإذن. دائمًا ما يُستخدم في الوضع manual.

setUser(user: string)

قم بتعيين هوية الزائر وتحديث الإذن. دائمًا ما يُستخدم في الوضع auto.

can(action: string, object: string)

تحقق مما إذا كان المستخدم يمكنه تنفيذ action على object.

cannot(action: string, object: string)

تحقق مما إذا كان المستخدم لا يمكنه تنفيذ action على object.

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

تحقق مما إذا كان المستخدم يمكنه تنفيذ action على جميع الكائنات في objects.

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

تحقق مما إذا كان المستخدم يمكنه تنفيذ action على أي واحد من objects.

لماذا Casbin.js

قد يتساءل الناس عن الفرق بين Node-Casbin و Casbin.js. بكلمة واحدة، Node-Casbin هو جوهر Casbin المُنفذ في بيئة NodeJS، وعادةً ما يُستخدم كأداة لإدارة التحكم في الوصول على أطراف الخادم. Casbin.js هو مكتبة واجهة المستخدم التي تساعدك على استخدام Casbin لتفويض مستخدمي صفحتك الويب على جانب العميل.

عادةً، لا يُعتبر مناسبًا لبناء خدمة Casbin مباشرة والقيام بمهام التفويض/التنفيذ في تطبيق واجهة الويب الأمامية بسبب المشاكل التالية:

1. عندما يقوم شخص ما بتشغيل العميل، سيتم تهيئة المنفذ، وسوف يسحب جميع السياسات من طبقات الاستمرارية الخلفية. يمكن أن يجلب التزامن العالي ضغطًا شديدًا على قواعد البيانات ويكلف الكثير من النقل الشبكي.
2. تحميل جميع السياسات إلى جانب العميل يمكن أن يجلب مخاطر أمنية.
3. من الصعب فصل العميل والخادم وكذلك تسهيل التطوير الرشيق.

نحن بحاجة إلى أداة تسهل عملية استخدام Casbin في الواجهة الأمامية. في الواقع، جوهر Casbin.js هو التلاعب بإذن المستخدم الحالي على جانب العميل. كما ذكرت، يقوم Casbin.js بجلب من نقطة نهاية محددة. هذا الإجراء سيزامن إذن المستخدم مع خدمة Casbin الخلفية. بعد الحصول على بيانات الإذن، يمكن للمطورين استخدام واجهات Casbin.js لإدارة سلوك المستخدم على جانب الواجهة الأمامية.

Casbin.js يتجنب المشكلتين المذكورتين أعلاه: لن يتم سحب خدمة Casbin مرارًا وتكرارًا، ويتم تقليل حجم الرسائل المتبادلة بين العميل والخادم. نحن نتجنب أيضًا تخزين جميع السياسات في الواجهة الأمامية. يمكن للمستخدم فقط الوصول إلى إذنه الخاص، ولكن ليس لديه معرفة عن نموذج التحكم في الوصول وإذن المستخدمين الآخرين. بالإضافة إلى ذلك، يمكن لـ Casbin.js أيضًا فصل العميل والخادم بكفاءة في إدارة التفويض.