Maslosoft Binder Documentation
Knockout JS tracker and binding handlers with coffee and sugar
ACL
Access Control For User Interface Elements
Configuring
This binding will check if users is allowed action,
and hide element if denied. Before use, action need to be defined
by static property Maslosoft.Binder.Acl.allow
of ACL binding handler. This property should contain Access Control
checking function. This function need to return boolean true or false
Access control function will get parameters same as observable value. In fact this binding handler will simply pass it's value to access control cheching function and display or hide element according to this function's result.
Using in HTML
Checking roles is performed by user defined function, which will get all parameters passed to observable. This way Your access control logic can be arbitrarily customized.
This binding requires observable value to allow updates. However
format of value is not strict, as it's simply passed to
checking function defined as Maslosoft.Binder.Acl.allow.
In this example ACL consist of roles as a object keys and user observable object instance as a value:
<div data-bind="acl: {'<role-name>': <observable-user-instance>}"><ui-element></div>
If updates are not required, even string value can be passed.
Live Example
In this example user has always granted access to action.one, and access to
action.two is dependent on its isGuest property value.
Try to click buttons to see result:
Relevant code used in examples:
<div>
<span data-bind="acl: {'action.one': binder.model.AclUser}" class="label label-warning">Should be visible always</span>
<span data-bind="acl: {'action.two': binder.model.AclUser}" class="label label-success">Should be visible for registered</span>
<br />
<br />
<button class="btn btn-success" id="allow">Allow Access</button>
<button class="btn btn-danger" id="deny">Deny Access</button>
</div>
<script>
window.onload = (function () {
var actionAllowed = '';
// This is example function to check access
binder.myAcl = function (acl) {
console.log("Checking acl: ", acl);
if (acl['action.one']) {
console.log('Allow action.one');
return true;
}
if (acl['action.two'] && !acl['action.two'].isGuest) {
console.log('Allow action.two');
return true;
}
return false;
};
// Apply bindings
Maslosoft.Binder.Acl.allow = binder.myAcl
binder.model.AclUser = new Maslosoft.Koe.AclUser();
ko.applyBindings({model: binder.model}, document.getElementById('ko-binder'));
});
</script>