BranchesTags

Repository files navigation

StatementsBranchesFunctionsLines
StatementsBranchesFunctionsLines

Vacl

A lightweight, strictly-typed, Vue 3 ACL directives library.
Report Bug · Request Feature

Table of Contents

  1. About The Project
  2. Getting Started
  3. Usage
  4. Advanced Configuration
  5. Roadmap
  6. Contributing
  7. License
  8. Contact
  9. Acknowledgements

About The Project

Vacl is a small, fast and strictly typed ACL for Vue3. It offers simple on-load configuration for permissions and roles, with helpful template directives like v-can, v-cannot, etc.

It is not a full ACL system, like CASL, rather an easy-to-start js accompaniment to the likes of the Spatie Laravel Permissions package.

Vacl is designed to get you set up with frontend authorisation as fast as possible, so you can move on to other things in your SPA.

<!---If the delete permission is matched--><buttonv-can="'delete'">Delete</button><!---If the staff role is matched--><buttonv-has="'staff'">Delete</button>

Built With

Getting Started

Prerequisites

This library is for Vue3 only. If you need ACL for Vue2 please consider one of the following:

Installation

  1. Install:

    npm install vacl

    or

    yarn add vacl

  2. Configure:

    importVACLfrom'vacl';createApp(App).use(VACL,{permissions: ['view products','edit products'],roles: ['staff','editor']}).mount('#app');

    We are manually passing a config object as an example. In reality the roles and permissions would be generated on the server and passed to the frontend.

    Just ensure the config passed to VACL takes the following shape:

    {
permissions: string[];
roles: roles[];}

    Please note: This is a collective of the roles/permissions that the user has, if a match is unsuccessful it is assumed the user does not have that role/permission.

Usage

Directives

To show or remove an element based on permissions:

<!---If the delete permission is matched-->
<buttonv-can="'delete'">Delete</button>
<!---If either the delete or archive permission is matched-->
<buttonv-can:any="'delete,archive'">Delete</button>
<!---If both delete and archive permission is matched-->
<buttonv-can:all="'delete,archive'">Delete</button>

Roles work exactly same, using the has directive:

<!---If the staff role is matched-->
<buttonv-has="'staff'">Delete</button>
<!---If either the staff or editor role is matched-->
<buttonv-has:any="'staff,editor'">Delete</button>
<!---If both staff and editor role is matched-->
<buttonv-has:all="'staff,editor'">Delete</button>

There are also inverse directives, should you need them:

<!---If the delete permission is missing-->
<buttonv-cannot="'delete'">Contact an Admin</button>
<!---If either the delete or archive permission is missing-->
<buttonv-cannot:any="'delete,archive'">Contact an Admin</button>
<!---If both delete and archive permission are missing-->
<buttonv-cannot:all="'delete,archive'">Contact an Admin</button>

For roles:

<!---If the staff role is missing-->
<buttonv-hasnt="'staff'">Contact an Admin</button>
<!---If either the staff or editor role is missing-->
<buttonv-hasnt:any="'staff,editor'">Contact an Admin</button>
<!---If both staff and editor role are missing-->
<buttonv-hasnt:all="'staff,editor'">Contact an Admin</button>

Direct Invocation

If you need something more complex you can access the Vacl instance directly:

<buttonv-if="$vacl.can('delete') ||$vacl.has('admin')">Delete</button>

There are also a number of methods you can leverage on the $vacl instance:

MethodArgumentDescription
can()string[]
string		Shorthand accessor for hasAllPermissions().
hasAllPermissions()string[]
string		Assert the store has all of the passed permission(s).
hasAnyPermissions()string[]
string		Assert the store has any of the passed permission(s).
missingAllPermissions()string[]
string		Assert the store is missing all of the passed permission(s).
missingAnyPermissions()string[]
string		Assert the store is missing at least 1 of the passed permission(s).
has()string[]
string		Shorthand accessor for hasAllRoles().
hasAllRoles()string[]
string		Assert the store has all of the passed role(s).
hasAnyRoles()string[]
string		Assert the store has any of the passed role(s).
missingAllRoles()string[]
string		Assert the store is missing all of the passed role(s).
missingAnyRoles()string[]
string		Assert the store is missing at least 1 of the passed role(s).
getRoles()-Gets the array of currently stored roles.
getPermissions()-Gets the array of currently stored permissions.
setRoles()string[]Overwrites the role store with the passed array.
setPermissions()string[]Overwrites the permission store with the passed array.
addRoles()string[]
string		Adds the given role(s) to the role store.
addPermissions()string
string[]		Adds the given permission(s) to the permission store.
clearRoles()-Clears the currently stored roles.
clearPermissions()-Clears the currently stored permissions.
clear()-Clears both the role and permission store.

Advanced Configuration

When initialising (app.use(Vacl, config)) there are additional properties you can set:

PropertyDefaultDescription
permissions[ ]Array of permission strings that the user has, eg: ['view jobs', 'edit posts']
roles[ ]Array of role strings that the user has, eg: ['admin', 'sales']
forceRemovefalseBy default a directive that fails a check, like v-can, will set the element to display: hidden. If forceRemove is set to true then the element will be removed from the DOM entirely. This might be especially desirable when using on active components, but carries the cost of removing the element from the Vue reactivity watchers.

Reactivity

There are some limitations regarding the reactivity in Vue. For instance once an element is removed via a custom directive (pretty much anything other than v-if) it is not currently possible to re-insert it should the user gain the necessary role/permission - a page refresh is required. This is an issue with all Vue acl-directive packages, but we are currently investigating work-arounds.

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Twitter - @FullStackFool

NPM - https://www.npmjs.com/package/vacl

Acknowledgements

Below is a list of those who have helped with excellent peer review and feedback during development.

About

A lightweight, strictly-typed, Vue 3 ACL directives library.

Topics

acldirectivespermissionsrolestypescriptvue3

Resources

Readme
MIT license

Contributing

Contributing
Activity

Stars

3 stars

Watchers

2 watching

Forks

2 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
StatementsBranchesFunctionsLines
StatementsBranchesFunctionsLines
Vacl

A lightweight, strictly-typed, Vue 3 ACL directives library.

Report Bug
·
Request Feature
Table of Contents
  1. About The Project
  2. Getting Started
  3. Usage
  4. Advanced Configuration
  5. Roadmap
  6. Contributing
  7. License
  8. Contact
  9. Acknowledgements
About The Project
Vacl is a small, fast and strictly typed ACL for Vue3. It offers simple on-load
configuration for permissions and roles, with helpful template directives
like v-can, v-cannot, etc.
It is not a full ACL system, like CASL,
rather an easy-to-start js accompaniment to the likes of the
Spatie Laravel Permissions package.
Vacl is designed to get you set up with frontend authorisation as fast as possible,
so you can move on to other things in your SPA.
<!---If the delete permission is matched--><buttonv-can="'delete'">Delete</button><!---If the staff role is matched--><buttonv-has="'staff'">Delete</button>
Built With
Getting Started
Prerequisites
This library is for Vue3 only. If you need ACL for Vue2 please
consider one of the following:
Installation
  1. Install:
    npm install vacl
    or
    yarn add vacl
  2. Configure:
    importVACLfrom'vacl';createApp(App).use(VACL,{permissions: ['view products','edit products'],roles: ['staff','editor']}).mount('#app');
    We are manually passing a config object as an example. In reality the roles and permissions
would be generated on the server and passed to the frontend.
    Just ensure the config passed to VACL takes the following shape:
    {
permissions: string[];
roles: roles[];}
    Please note: This is a collective of the roles/permissions that the user has, if a match is
unsuccessful it is assumed the user does not have that role/permission.
Usage
Directives
To show or remove an element based on permissions:
<!---If the delete permission is matched-->
<buttonv-can="'delete'">Delete</button>
<!---If either the delete or archive permission is matched-->
<buttonv-can:any="'delete,archive'">Delete</button>
<!---If both delete and archive permission is matched-->
<buttonv-can:all="'delete,archive'">Delete</button>
Roles work exactly same, using the has directive:
<!---If the staff role is matched-->
<buttonv-has="'staff'">Delete</button>
<!---If either the staff or editor role is matched-->
<buttonv-has:any="'staff,editor'">Delete</button>
<!---If both staff and editor role is matched-->
<buttonv-has:all="'staff,editor'">Delete</button>
There are also inverse directives, should you need them:
<!---If the delete permission is missing-->
<buttonv-cannot="'delete'">Contact an Admin</button>
<!---If either the delete or archive permission is missing-->
<buttonv-cannot:any="'delete,archive'">Contact an Admin</button>
<!---If both delete and archive permission are missing-->
<buttonv-cannot:all="'delete,archive'">Contact an Admin</button>
For roles:
<!---If the staff role is missing-->
<buttonv-hasnt="'staff'">Contact an Admin</button>
<!---If either the staff or editor role is missing-->
<buttonv-hasnt:any="'staff,editor'">Contact an Admin</button>
<!---If both staff and editor role are missing-->
<buttonv-hasnt:all="'staff,editor'">Contact an Admin</button>
Direct Invocation
If you need something more complex you can access the Vacl instance directly:
<buttonv-if="$vacl.can('delete') ||$vacl.has('admin')">Delete</button>
There are also a number of methods you can leverage on the $vacl instance:
MethodArgumentDescription
can()string[]
string		Shorthand accessor for hasAllPermissions().
hasAllPermissions()string[]
string		Assert the store has all of the passed permission(s).
hasAnyPermissions()string[]
string		Assert the store has any of the passed permission(s).
missingAllPermissions()string[]
string		Assert the store is missing all of the passed permission(s).
missingAnyPermissions()string[]
string		Assert the store is missing at least 1 of the passed permission(s).
has()string[]
string		Shorthand accessor for hasAllRoles().
hasAllRoles()string[]
string		Assert the store has all of the passed role(s).
hasAnyRoles()string[]
string		Assert the store has any of the passed role(s).
missingAllRoles()string[]
string		Assert the store is missing all of the passed role(s).
missingAnyRoles()string[]
string		Assert the store is missing at least 1 of the passed role(s).
getRoles()-Gets the array of currently stored roles.
getPermissions()-Gets the array of currently stored permissions.
setRoles()string[]Overwrites the role store with the passed array.
setPermissions()string[]Overwrites the permission store with the passed array.
addRoles()string[]
string		Adds the given role(s) to the role store.
addPermissions()string
string[]		Adds the given permission(s) to the permission store.
clearRoles()-Clears the currently stored roles.
clearPermissions()-Clears the currently stored permissions.
clear()-Clears both the role and permission store.
Advanced Configuration
When initialising (app.use(Vacl, config)) there are additional properties you can set:
PropertyDefaultDescription
permissions[ ]Array of permission strings that the user has, eg: ['view jobs', 'edit posts']
roles[ ]Array of role strings that the user has, eg: ['admin', 'sales']
forceRemovefalseBy default a directive that fails a check, like v-can, will set the element to display: hidden. If forceRemove is set to true then the element will be removed from the DOM entirely. This might be especially desirable when using on active components, but carries the cost of removing the element from the Vue reactivity watchers.
Reactivity
There are some limitations regarding the reactivity in Vue. For instance once an element is
removed via a custom directive (pretty much anything other than v-if) it is not currently possible to re-insert
it should the user gain the necessary role/permission - a page refresh is required. This is an issue with
all Vue acl-directive packages, but we are currently investigating work-arounds.
Roadmap
See the open issues for a list of proposed
features (and known issues).
Contributing
Contributions are what make the open source community such an amazing place to learn,
inspire, and create. Any contributions you make are greatly appreciated.
  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request
License
Distributed under the MIT License. See LICENSE for more information.
Contact
Twitter - @FullStackFool
NPM - https://www.npmjs.com/package/vacl
Acknowledgements
Below is a list of those who have helped with excellent peer review and feedback during development.
About
A lightweight, strictly-typed, Vue 3 ACL directives library.
Topics
acldirectivespermissionsrolestypescriptvue3
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
3 stars
Watchers
2 watching
Forks
2 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
StatementsBranchesFunctionsLines
StatementsBranchesFunctionsLines
Vacl

A lightweight, strictly-typed, Vue 3 ACL directives library.

Report Bug
·
Request Feature
Table of Contents
  1. About The Project
  2. Getting Started
  3. Usage
  4. Advanced Configuration
  5. Roadmap
  6. Contributing
  7. License
  8. Contact
  9. Acknowledgements
About The Project
Vacl is a small, fast and strictly typed ACL for Vue3. It offers simple on-load
configuration for permissions and roles, with helpful template directives
like v-can, v-cannot, etc.
It is not a full ACL system, like CASL,
rather an easy-to-start js accompaniment to the likes of the
Spatie Laravel Permissions package.
Vacl is designed to get you set up with frontend authorisation as fast as possible,
so you can move on to other things in your SPA.
<!---If the delete permission is matched--><buttonv-can="'delete'">Delete</button><!---If the staff role is matched--><buttonv-has="'staff'">Delete</button>
Built With
Getting Started
Prerequisites
This library is for Vue3 only. If you need ACL for Vue2 please
consider one of the following:
Installation
  1. Install:
    npm install vacl
    or
    yarn add vacl
  2. Configure:
    importVACLfrom'vacl';createApp(App).use(VACL,{permissions: ['view products','edit products'],roles: ['staff','editor']}).mount('#app');
    We are manually passing a config object as an example. In reality the roles and permissions
would be generated on the server and passed to the frontend.
    Just ensure the config passed to VACL takes the following shape:
    {
permissions: string[];
roles: roles[];}
    Please note: This is a collective of the roles/permissions that the user has, if a match is
unsuccessful it is assumed the user does not have that role/permission.
Usage
Directives
To show or remove an element based on permissions:
<!---If the delete permission is matched-->
<buttonv-can="'delete'">Delete</button>
<!---If either the delete or archive permission is matched-->
<buttonv-can:any="'delete,archive'">Delete</button>
<!---If both delete and archive permission is matched-->
<buttonv-can:all="'delete,archive'">Delete</button>
Roles work exactly same, using the has directive:
<!---If the staff role is matched-->
<buttonv-has="'staff'">Delete</button>
<!---If either the staff or editor role is matched-->
<buttonv-has:any="'staff,editor'">Delete</button>
<!---If both staff and editor role is matched-->
<buttonv-has:all="'staff,editor'">Delete</button>
There are also inverse directives, should you need them:
<!---If the delete permission is missing-->
<buttonv-cannot="'delete'">Contact an Admin</button>
<!---If either the delete or archive permission is missing-->
<buttonv-cannot:any="'delete,archive'">Contact an Admin</button>
<!---If both delete and archive permission are missing-->
<buttonv-cannot:all="'delete,archive'">Contact an Admin</button>
For roles:
<!---If the staff role is missing-->
<buttonv-hasnt="'staff'">Contact an Admin</button>
<!---If either the staff or editor role is missing-->
<buttonv-hasnt:any="'staff,editor'">Contact an Admin</button>
<!---If both staff and editor role are missing-->
<buttonv-hasnt:all="'staff,editor'">Contact an Admin</button>
Direct Invocation
If you need something more complex you can access the Vacl instance directly:
<buttonv-if="$vacl.can('delete') ||$vacl.has('admin')">Delete</button>
There are also a number of methods you can leverage on the $vacl instance:
MethodArgumentDescription
can()string[]
string		Shorthand accessor for hasAllPermissions().
hasAllPermissions()string[]
string		Assert the store has all of the passed permission(s).
hasAnyPermissions()string[]
string		Assert the store has any of the passed permission(s).
missingAllPermissions()string[]
string		Assert the store is missing all of the passed permission(s).
missingAnyPermissions()string[]
string		Assert the store is missing at least 1 of the passed permission(s).
has()string[]
string		Shorthand accessor for hasAllRoles().
hasAllRoles()string[]
string		Assert the store has all of the passed role(s).
hasAnyRoles()string[]
string		Assert the store has any of the passed role(s).
missingAllRoles()string[]
string		Assert the store is missing all of the passed role(s).
missingAnyRoles()string[]
string		Assert the store is missing at least 1 of the passed role(s).
getRoles()-Gets the array of currently stored roles.
getPermissions()-Gets the array of currently stored permissions.
setRoles()string[]Overwrites the role store with the passed array.
setPermissions()string[]Overwrites the permission store with the passed array.
addRoles()string[]
string		Adds the given role(s) to the role store.
addPermissions()string
string[]		Adds the given permission(s) to the permission store.
clearRoles()-Clears the currently stored roles.
clearPermissions()-Clears the currently stored permissions.
clear()-Clears both the role and permission store.
Advanced Configuration
When initialising (app.use(Vacl, config)) there are additional properties you can set:
PropertyDefaultDescription
permissions[ ]Array of permission strings that the user has, eg: ['view jobs', 'edit posts']
roles[ ]Array of role strings that the user has, eg: ['admin', 'sales']
forceRemovefalseBy default a directive that fails a check, like v-can, will set the element to display: hidden. If forceRemove is set to true then the element will be removed from the DOM entirely. This might be especially desirable when using on active components, but carries the cost of removing the element from the Vue reactivity watchers.
Reactivity
There are some limitations regarding the reactivity in Vue. For instance once an element is
removed via a custom directive (pretty much anything other than v-if) it is not currently possible to re-insert
it should the user gain the necessary role/permission - a page refresh is required. This is an issue with
all Vue acl-directive packages, but we are currently investigating work-arounds.
Roadmap
See the open issues for a list of proposed
features (and known issues).
Contributing
Contributions are what make the open source community such an amazing place to learn,
inspire, and create. Any contributions you make are greatly appreciated.
  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request
License
Distributed under the MIT License. See LICENSE for more information.
Contact
Twitter - @FullStackFool
NPM - https://www.npmjs.com/package/vacl
Acknowledgements
Below is a list of those who have helped with excellent peer review and feedback during development.
About
A lightweight, strictly-typed, Vue 3 ACL directives library.
Topics
acldirectivespermissionsrolestypescriptvue3
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
3 stars
Watchers
2 watching
Forks
2 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
StatementsBranchesFunctionsLines
StatementsBranchesFunctionsLines
Vacl

A lightweight, strictly-typed, Vue 3 ACL directives library.

Report Bug
·
Request Feature
Table of Contents
  1. About The Project
  2. Getting Started
  3. Usage
  4. Advanced Configuration
  5. Roadmap
  6. Contributing
  7. License
  8. Contact
  9. Acknowledgements
About The Project
Vacl is a small, fast and strictly typed ACL for Vue3. It offers simple on-load
configuration for permissions and roles, with helpful template directives
like v-can, v-cannot, etc.
It is not a full ACL system, like CASL,
rather an easy-to-start js accompaniment to the likes of the
Spatie Laravel Permissions package.
Vacl is designed to get you set up with frontend authorisation as fast as possible,
so you can move on to other things in your SPA.
<!---If the delete permission is matched--><buttonv-can="'delete'">Delete</button><!---If the staff role is matched--><buttonv-has="'staff'">Delete</button>
Built With
Getting Started
Prerequisites
This library is for Vue3 only. If you need ACL for Vue2 please
consider one of the following:
Installation
  1. Install:
    npm install vacl
    or
    yarn add vacl
  2. Configure:
    importVACLfrom'vacl';createApp(App).use(VACL,{permissions: ['view products','edit products'],roles: ['staff','editor']}).mount('#app');
    We are manually passing a config object as an example. In reality the roles and permissions
would be generated on the server and passed to the frontend.
    Just ensure the config passed to VACL takes the following shape:
    {
permissions: string[];
roles: roles[];}
    Please note: This is a collective of the roles/permissions that the user has, if a match is
unsuccessful it is assumed the user does not have that role/permission.
Usage
Directives
To show or remove an element based on permissions:
<!---If the delete permission is matched-->
<buttonv-can="'delete'">Delete</button>
<!---If either the delete or archive permission is matched-->
<buttonv-can:any="'delete,archive'">Delete</button>
<!---If both delete and archive permission is matched-->
<buttonv-can:all="'delete,archive'">Delete</button>
Roles work exactly same, using the has directive:
<!---If the staff role is matched-->
<buttonv-has="'staff'">Delete</button>
<!---If either the staff or editor role is matched-->
<buttonv-has:any="'staff,editor'">Delete</button>
<!---If both staff and editor role is matched-->
<buttonv-has:all="'staff,editor'">Delete</button>
There are also inverse directives, should you need them:
<!---If the delete permission is missing-->
<buttonv-cannot="'delete'">Contact an Admin</button>
<!---If either the delete or archive permission is missing-->
<buttonv-cannot:any="'delete,archive'">Contact an Admin</button>
<!---If both delete and archive permission are missing-->
<buttonv-cannot:all="'delete,archive'">Contact an Admin</button>
For roles:
<!---If the staff role is missing-->
<buttonv-hasnt="'staff'">Contact an Admin</button>
<!---If either the staff or editor role is missing-->
<buttonv-hasnt:any="'staff,editor'">Contact an Admin</button>
<!---If both staff and editor role are missing-->
<buttonv-hasnt:all="'staff,editor'">Contact an Admin</button>
Direct Invocation
If you need something more complex you can access the Vacl instance directly:
<buttonv-if="$vacl.can('delete') ||$vacl.has('admin')">Delete</button>
There are also a number of methods you can leverage on the $vacl instance:
MethodArgumentDescription
can()string[]
string		Shorthand accessor for hasAllPermissions().
hasAllPermissions()string[]
string		Assert the store has all of the passed permission(s).
hasAnyPermissions()string[]
string		Assert the store has any of the passed permission(s).
missingAllPermissions()string[]
string		Assert the store is missing all of the passed permission(s).
missingAnyPermissions()string[]
string		Assert the store is missing at least 1 of the passed permission(s).
has()string[]
string		Shorthand accessor for hasAllRoles().
hasAllRoles()string[]
string		Assert the store has all of the passed role(s).
hasAnyRoles()string[]
string		Assert the store has any of the passed role(s).
missingAllRoles()string[]
string		Assert the store is missing all of the passed role(s).
missingAnyRoles()string[]
string		Assert the store is missing at least 1 of the passed role(s).
getRoles()-Gets the array of currently stored roles.
getPermissions()-Gets the array of currently stored permissions.
setRoles()string[]Overwrites the role store with the passed array.
setPermissions()string[]Overwrites the permission store with the passed array.
addRoles()string[]
string		Adds the given role(s) to the role store.
addPermissions()string
string[]		Adds the given permission(s) to the permission store.
clearRoles()-Clears the currently stored roles.
clearPermissions()-Clears the currently stored permissions.
clear()-Clears both the role and permission store.
Advanced Configuration
When initialising (app.use(Vacl, config)) there are additional properties you can set:
PropertyDefaultDescription
permissions[ ]Array of permission strings that the user has, eg: ['view jobs', 'edit posts']
roles[ ]Array of role strings that the user has, eg: ['admin', 'sales']
forceRemovefalseBy default a directive that fails a check, like v-can, will set the element to display: hidden. If forceRemove is set to true then the element will be removed from the DOM entirely. This might be especially desirable when using on active components, but carries the cost of removing the element from the Vue reactivity watchers.
Reactivity
There are some limitations regarding the reactivity in Vue. For instance once an element is
removed via a custom directive (pretty much anything other than v-if) it is not currently possible to re-insert
it should the user gain the necessary role/permission - a page refresh is required. This is an issue with
all Vue acl-directive packages, but we are currently investigating work-arounds.
Roadmap
See the open issues for a list of proposed
features (and known issues).
Contributing
Contributions are what make the open source community such an amazing place to learn,
inspire, and create. Any contributions you make are greatly appreciated.
  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request
License
Distributed under the MIT License. See LICENSE for more information.
Contact
Twitter - @FullStackFool
NPM - https://www.npmjs.com/package/vacl
Acknowledgements
Below is a list of those who have helped with excellent peer review and feedback during development.
About
A lightweight, strictly-typed, Vue 3 ACL directives library.
Topics
acldirectivespermissionsrolestypescriptvue3
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
3 stars
Watchers
2 watching
Forks
2 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
StatementsBranchesFunctionsLines
StatementsBranchesFunctionsLines
Vacl

A lightweight, strictly-typed, Vue 3 ACL directives library.

Report Bug
·
Request Feature
Table of Contents
  1. About The Project
  2. Getting Started
  3. Usage
  4. Advanced Configuration
  5. Roadmap
  6. Contributing
  7. License
  8. Contact
  9. Acknowledgements
About The Project
Vacl is a small, fast and strictly typed ACL for Vue3. It offers simple on-load
configuration for permissions and roles, with helpful template directives
like v-can, v-cannot, etc.
It is not a full ACL system, like CASL,
rather an easy-to-start js accompaniment to the likes of the
Spatie Laravel Permissions package.
Vacl is designed to get you set up with frontend authorisation as fast as possible,
so you can move on to other things in your SPA.
<!---If the delete permission is matched--><buttonv-can="'delete'">Delete</button><!---If the staff role is matched--><buttonv-has="'staff'">Delete</button>
Built With
Getting Started
Prerequisites
This library is for Vue3 only. If you need ACL for Vue2 please
consider one of the following:
Installation
  1. Install:
    npm install vacl
    or
    yarn add vacl
  2. Configure:
    importVACLfrom'vacl';createApp(App).use(VACL,{permissions: ['view products','edit products'],roles: ['staff','editor']}).mount('#app');
    We are manually passing a config object as an example. In reality the roles and permissions
would be generated on the server and passed to the frontend.
    Just ensure the config passed to VACL takes the following shape:
    {
permissions: string[];
roles: roles[];}
    Please note: This is a collective of the roles/permissions that the user has, if a match is
unsuccessful it is assumed the user does not have that role/permission.
Usage
Directives
To show or remove an element based on permissions:
<!---If the delete permission is matched-->
<buttonv-can="'delete'">Delete</button>
<!---If either the delete or archive permission is matched-->
<buttonv-can:any="'delete,archive'">Delete</button>
<!---If both delete and archive permission is matched-->
<buttonv-can:all="'delete,archive'">Delete</button>
Roles work exactly same, using the has directive:
<!---If the staff role is matched-->
<buttonv-has="'staff'">Delete</button>
<!---If either the staff or editor role is matched-->
<buttonv-has:any="'staff,editor'">Delete</button>
<!---If both staff and editor role is matched-->
<buttonv-has:all="'staff,editor'">Delete</button>
There are also inverse directives, should you need them:
<!---If the delete permission is missing-->
<buttonv-cannot="'delete'">Contact an Admin</button>
<!---If either the delete or archive permission is missing-->
<buttonv-cannot:any="'delete,archive'">Contact an Admin</button>
<!---If both delete and archive permission are missing-->
<buttonv-cannot:all="'delete,archive'">Contact an Admin</button>
For roles:
<!---If the staff role is missing-->
<buttonv-hasnt="'staff'">Contact an Admin</button>
<!---If either the staff or editor role is missing-->
<buttonv-hasnt:any="'staff,editor'">Contact an Admin</button>
<!---If both staff and editor role are missing-->
<buttonv-hasnt:all="'staff,editor'">Contact an Admin</button>
Direct Invocation
If you need something more complex you can access the Vacl instance directly:
<buttonv-if="$vacl.can('delete') ||$vacl.has('admin')">Delete</button>
There are also a number of methods you can leverage on the $vacl instance:
MethodArgumentDescription
can()string[]
string		Shorthand accessor for hasAllPermissions().
hasAllPermissions()string[]
string		Assert the store has all of the passed permission(s).
hasAnyPermissions()string[]
string		Assert the store has any of the passed permission(s).
missingAllPermissions()string[]
string		Assert the store is missing all of the passed permission(s).
missingAnyPermissions()string[]
string		Assert the store is missing at least 1 of the passed permission(s).
has()string[]
string		Shorthand accessor for hasAllRoles().
hasAllRoles()string[]
string		Assert the store has all of the passed role(s).
hasAnyRoles()string[]
string		Assert the store has any of the passed role(s).
missingAllRoles()string[]
string		Assert the store is missing all of the passed role(s).
missingAnyRoles()string[]
string		Assert the store is missing at least 1 of the passed role(s).
getRoles()-Gets the array of currently stored roles.
getPermissions()-Gets the array of currently stored permissions.
setRoles()string[]Overwrites the role store with the passed array.
setPermissions()string[]Overwrites the permission store with the passed array.
addRoles()string[]
string		Adds the given role(s) to the role store.
addPermissions()string
string[]		Adds the given permission(s) to the permission store.
clearRoles()-Clears the currently stored roles.
clearPermissions()-Clears the currently stored permissions.
clear()-Clears both the role and permission store.
Advanced Configuration
When initialising (app.use(Vacl, config)) there are additional properties you can set:
PropertyDefaultDescription
permissions[ ]Array of permission strings that the user has, eg: ['view jobs', 'edit posts']
roles[ ]Array of role strings that the user has, eg: ['admin', 'sales']
forceRemovefalseBy default a directive that fails a check, like v-can, will set the element to display: hidden. If forceRemove is set to true then the element will be removed from the DOM entirely. This might be especially desirable when using on active components, but carries the cost of removing the element from the Vue reactivity watchers.
Reactivity
There are some limitations regarding the reactivity in Vue. For instance once an element is
removed via a custom directive (pretty much anything other than v-if) it is not currently possible to re-insert
it should the user gain the necessary role/permission - a page refresh is required. This is an issue with
all Vue acl-directive packages, but we are currently investigating work-arounds.
Roadmap
See the open issues for a list of proposed
features (and known issues).
Contributing
Contributions are what make the open source community such an amazing place to learn,
inspire, and create. Any contributions you make are greatly appreciated.
  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request
License
Distributed under the MIT License. See LICENSE for more information.
Contact
Twitter - @FullStackFool
NPM - https://www.npmjs.com/package/vacl
Acknowledgements
Below is a list of those who have helped with excellent peer review and feedback during development.
About
A lightweight, strictly-typed, Vue 3 ACL directives library.
Topics
acldirectivespermissionsrolestypescriptvue3
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
3 stars
Watchers
2 watching
Forks
2 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
StatementsBranchesFunctionsLines
StatementsBranchesFunctionsLines
Vacl

A lightweight, strictly-typed, Vue 3 ACL directives library.

Report Bug
·
Request Feature
Table of Contents
  1. About The Project
  2. Getting Started
  3. Usage
  4. Advanced Configuration
  5. Roadmap
  6. Contributing
  7. License
  8. Contact
  9. Acknowledgements
About The Project
Vacl is a small, fast and strictly typed ACL for Vue3. It offers simple on-load
configuration for permissions and roles, with helpful template directives
like v-can, v-cannot, etc.
It is not a full ACL system, like CASL,
rather an easy-to-start js accompaniment to the likes of the
Spatie Laravel Permissions package.
Vacl is designed to get you set up with frontend authorisation as fast as possible,
so you can move on to other things in your SPA.
<!---If the delete permission is matched--><buttonv-can="'delete'">Delete</button><!---If the staff role is matched--><buttonv-has="'staff'">Delete</button>
Built With
Getting Started
Prerequisites
This library is for Vue3 only. If you need ACL for Vue2 please
consider one of the following:
Installation
  1. Install:
    npm install vacl
    or
    yarn add vacl
  2. Configure:
    importVACLfrom'vacl';createApp(App).use(VACL,{permissions: ['view products','edit products'],roles: ['staff','editor']}).mount('#app');
    We are manually passing a config object as an example. In reality the roles and permissions
would be generated on the server and passed to the frontend.
    Just ensure the config passed to VACL takes the following shape:
    {
permissions: string[];
roles: roles[];}
    Please note: This is a collective of the roles/permissions that the user has, if a match is
unsuccessful it is assumed the user does not have that role/permission.
Usage
Directives
To show or remove an element based on permissions:
<!---If the delete permission is matched-->
<buttonv-can="'delete'">Delete</button>
<!---If either the delete or archive permission is matched-->
<buttonv-can:any="'delete,archive'">Delete</button>
<!---If both delete and archive permission is matched-->
<buttonv-can:all="'delete,archive'">Delete</button>
Roles work exactly same, using the has directive:
<!---If the staff role is matched-->
<buttonv-has="'staff'">Delete</button>
<!---If either the staff or editor role is matched-->
<buttonv-has:any="'staff,editor'">Delete</button>
<!---If both staff and editor role is matched-->
<buttonv-has:all="'staff,editor'">Delete</button>
There are also inverse directives, should you need them:
<!---If the delete permission is missing-->
<buttonv-cannot="'delete'">Contact an Admin</button>
<!---If either the delete or archive permission is missing-->
<buttonv-cannot:any="'delete,archive'">Contact an Admin</button>
<!---If both delete and archive permission are missing-->
<buttonv-cannot:all="'delete,archive'">Contact an Admin</button>
For roles:
<!---If the staff role is missing-->
<buttonv-hasnt="'staff'">Contact an Admin</button>
<!---If either the staff or editor role is missing-->
<buttonv-hasnt:any="'staff,editor'">Contact an Admin</button>
<!---If both staff and editor role are missing-->
<buttonv-hasnt:all="'staff,editor'">Contact an Admin</button>
Direct Invocation
If you need something more complex you can access the Vacl instance directly:
<buttonv-if="$vacl.can('delete') ||$vacl.has('admin')">Delete</button>
There are also a number of methods you can leverage on the $vacl instance:
MethodArgumentDescription
can()string[]
string		Shorthand accessor for hasAllPermissions().
hasAllPermissions()string[]
string		Assert the store has all of the passed permission(s).
hasAnyPermissions()string[]
string		Assert the store has any of the passed permission(s).
missingAllPermissions()string[]
string		Assert the store is missing all of the passed permission(s).
missingAnyPermissions()string[]
string		Assert the store is missing at least 1 of the passed permission(s).
has()string[]
string		Shorthand accessor for hasAllRoles().
hasAllRoles()string[]
string		Assert the store has all of the passed role(s).
hasAnyRoles()string[]
string		Assert the store has any of the passed role(s).
missingAllRoles()string[]
string		Assert the store is missing all of the passed role(s).
missingAnyRoles()string[]
string		Assert the store is missing at least 1 of the passed role(s).
getRoles()-Gets the array of currently stored roles.
getPermissions()-Gets the array of currently stored permissions.
setRoles()string[]Overwrites the role store with the passed array.
setPermissions()string[]Overwrites the permission store with the passed array.
addRoles()string[]
string		Adds the given role(s) to the role store.
addPermissions()string
string[]		Adds the given permission(s) to the permission store.
clearRoles()-Clears the currently stored roles.
clearPermissions()-Clears the currently stored permissions.
clear()-Clears both the role and permission store.
Advanced Configuration
When initialising (app.use(Vacl, config)) there are additional properties you can set:
PropertyDefaultDescription
permissions[ ]Array of permission strings that the user has, eg: ['view jobs', 'edit posts']
roles[ ]Array of role strings that the user has, eg: ['admin', 'sales']
forceRemovefalseBy default a directive that fails a check, like v-can, will set the element to display: hidden. If forceRemove is set to true then the element will be removed from the DOM entirely. This might be especially desirable when using on active components, but carries the cost of removing the element from the Vue reactivity watchers.
Reactivity
There are some limitations regarding the reactivity in Vue. For instance once an element is
removed via a custom directive (pretty much anything other than v-if) it is not currently possible to re-insert
it should the user gain the necessary role/permission - a page refresh is required. This is an issue with
all Vue acl-directive packages, but we are currently investigating work-arounds.
Roadmap
See the open issues for a list of proposed
features (and known issues).
Contributing
Contributions are what make the open source community such an amazing place to learn,
inspire, and create. Any contributions you make are greatly appreciated.
  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request
License
Distributed under the MIT License. See LICENSE for more information.
Contact
Twitter - @FullStackFool
NPM - https://www.npmjs.com/package/vacl
Acknowledgements
Below is a list of those who have helped with excellent peer review and feedback during development.
About
A lightweight, strictly-typed, Vue 3 ACL directives library.
Topics
acldirectivespermissionsrolestypescriptvue3
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
3 stars
Watchers
2 watching
Forks
2 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
StatementsBranchesFunctionsLines
StatementsBranchesFunctionsLines
Vacl

A lightweight, strictly-typed, Vue 3 ACL directives library.

Report Bug
·
Request Feature
Table of Contents
  1. About The Project
  2. Getting Started
  3. Usage
  4. Advanced Configuration
  5. Roadmap
  6. Contributing
  7. License
  8. Contact
  9. Acknowledgements
About The Project
Vacl is a small, fast and strictly typed ACL for Vue3. It offers simple on-load
configuration for permissions and roles, with helpful template directives
like v-can, v-cannot, etc.
It is not a full ACL system, like CASL,
rather an easy-to-start js accompaniment to the likes of the
Spatie Laravel Permissions package.
Vacl is designed to get you set up with frontend authorisation as fast as possible,
so you can move on to other things in your SPA.
<!---If the delete permission is matched--><buttonv-can="'delete'">Delete</button><!---If the staff role is matched--><buttonv-has="'staff'">Delete</button>
Built With
Getting Started
Prerequisites
This library is for Vue3 only. If you need ACL for Vue2 please
consider one of the following:
Installation
  1. Install:
    npm install vacl
    or
    yarn add vacl
  2. Configure:
    importVACLfrom'vacl';createApp(App).use(VACL,{permissions: ['view products','edit products'],roles: ['staff','editor']}).mount('#app');
    We are manually passing a config object as an example. In reality the roles and permissions
would be generated on the server and passed to the frontend.
    Just ensure the config passed to VACL takes the following shape:
    {
permissions: string[];
roles: roles[];}
    Please note: This is a collective of the roles/permissions that the user has, if a match is
unsuccessful it is assumed the user does not have that role/permission.
Usage
Directives
To show or remove an element based on permissions:
<!---If the delete permission is matched-->
<buttonv-can="'delete'">Delete</button>
<!---If either the delete or archive permission is matched-->
<buttonv-can:any="'delete,archive'">Delete</button>
<!---If both delete and archive permission is matched-->
<buttonv-can:all="'delete,archive'">Delete</button>
Roles work exactly same, using the has directive:
<!---If the staff role is matched-->
<buttonv-has="'staff'">Delete</button>
<!---If either the staff or editor role is matched-->
<buttonv-has:any="'staff,editor'">Delete</button>
<!---If both staff and editor role is matched-->
<buttonv-has:all="'staff,editor'">Delete</button>
There are also inverse directives, should you need them:
<!---If the delete permission is missing-->
<buttonv-cannot="'delete'">Contact an Admin</button>
<!---If either the delete or archive permission is missing-->
<buttonv-cannot:any="'delete,archive'">Contact an Admin</button>
<!---If both delete and archive permission are missing-->
<buttonv-cannot:all="'delete,archive'">Contact an Admin</button>
For roles:
<!---If the staff role is missing-->
<buttonv-hasnt="'staff'">Contact an Admin</button>
<!---If either the staff or editor role is missing-->
<buttonv-hasnt:any="'staff,editor'">Contact an Admin</button>
<!---If both staff and editor role are missing-->
<buttonv-hasnt:all="'staff,editor'">Contact an Admin</button>
Direct Invocation
If you need something more complex you can access the Vacl instance directly:
<buttonv-if="$vacl.can('delete') ||$vacl.has('admin')">Delete</button>
There are also a number of methods you can leverage on the $vacl instance:
MethodArgumentDescription
can()string[]
string		Shorthand accessor for hasAllPermissions().
hasAllPermissions()string[]
string		Assert the store has all of the passed permission(s).
hasAnyPermissions()string[]
string		Assert the store has any of the passed permission(s).
missingAllPermissions()string[]
string		Assert the store is missing all of the passed permission(s).
missingAnyPermissions()string[]
string		Assert the store is missing at least 1 of the passed permission(s).
has()string[]
string		Shorthand accessor for hasAllRoles().
hasAllRoles()string[]
string		Assert the store has all of the passed role(s).
hasAnyRoles()string[]
string		Assert the store has any of the passed role(s).
missingAllRoles()string[]
string		Assert the store is missing all of the passed role(s).
missingAnyRoles()string[]
string		Assert the store is missing at least 1 of the passed role(s).
getRoles()-Gets the array of currently stored roles.
getPermissions()-Gets the array of currently stored permissions.
setRoles()string[]Overwrites the role store with the passed array.
setPermissions()string[]Overwrites the permission store with the passed array.
addRoles()string[]
string		Adds the given role(s) to the role store.
addPermissions()string
string[]		Adds the given permission(s) to the permission store.
clearRoles()-Clears the currently stored roles.
clearPermissions()-Clears the currently stored permissions.
clear()-Clears both the role and permission store.
Advanced Configuration
When initialising (app.use(Vacl, config)) there are additional properties you can set:
PropertyDefaultDescription
permissions[ ]Array of permission strings that the user has, eg: ['view jobs', 'edit posts']
roles[ ]Array of role strings that the user has, eg: ['admin', 'sales']
forceRemovefalseBy default a directive that fails a check, like v-can, will set the element to display: hidden. If forceRemove is set to true then the element will be removed from the DOM entirely. This might be especially desirable when using on active components, but carries the cost of removing the element from the Vue reactivity watchers.
Reactivity
There are some limitations regarding the reactivity in Vue. For instance once an element is
removed via a custom directive (pretty much anything other than v-if) it is not currently possible to re-insert
it should the user gain the necessary role/permission - a page refresh is required. This is an issue with
all Vue acl-directive packages, but we are currently investigating work-arounds.
Roadmap
See the open issues for a list of proposed
features (and known issues).
Contributing
Contributions are what make the open source community such an amazing place to learn,
inspire, and create. Any contributions you make are greatly appreciated.
  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request
License
Distributed under the MIT License. See LICENSE for more information.
Contact
Twitter - @FullStackFool
NPM - https://www.npmjs.com/package/vacl
Acknowledgements
Below is a list of those who have helped with excellent peer review and feedback during development.
About
A lightweight, strictly-typed, Vue 3 ACL directives library.
Topics
acldirectivespermissionsrolestypescriptvue3
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
3 stars
Watchers
2 watching
Forks
2 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
StatementsBranchesFunctionsLines
StatementsBranchesFunctionsLines
Vacl

A lightweight, strictly-typed, Vue 3 ACL directives library.

Report Bug
·
Request Feature
Table of Contents
  1. About The Project
  2. Getting Started
  3. Usage
  4. Advanced Configuration
  5. Roadmap
  6. Contributing
  7. License
  8. Contact
  9. Acknowledgements
About The Project
Vacl is a small, fast and strictly typed ACL for Vue3. It offers simple on-load
configuration for permissions and roles, with helpful template directives
like v-can, v-cannot, etc.
It is not a full ACL system, like CASL,
rather an easy-to-start js accompaniment to the likes of the
Spatie Laravel Permissions package.
Vacl is designed to get you set up with frontend authorisation as fast as possible,
so you can move on to other things in your SPA.
<!---If the delete permission is matched--><buttonv-can="'delete'">Delete</button><!---If the staff role is matched--><buttonv-has="'staff'">Delete</button>
Built With
Getting Started
Prerequisites
This library is for Vue3 only. If you need ACL for Vue2 please
consider one of the following:
Installation
  1. Install:
    npm install vacl
    or
    yarn add vacl
  2. Configure:
    importVACLfrom'vacl';createApp(App).use(VACL,{permissions: ['view products','edit products'],roles: ['staff','editor']}).mount('#app');
    We are manually passing a config object as an example. In reality the roles and permissions
would be generated on the server and passed to the frontend.
    Just ensure the config passed to VACL takes the following shape:
    {
permissions: string[];
roles: roles[];}
    Please note: This is a collective of the roles/permissions that the user has, if a match is
unsuccessful it is assumed the user does not have that role/permission.
Usage
Directives
To show or remove an element based on permissions:
<!---If the delete permission is matched-->
<buttonv-can="'delete'">Delete</button>
<!---If either the delete or archive permission is matched-->
<buttonv-can:any="'delete,archive'">Delete</button>
<!---If both delete and archive permission is matched-->
<buttonv-can:all="'delete,archive'">Delete</button>
Roles work exactly same, using the has directive:
<!---If the staff role is matched-->
<buttonv-has="'staff'">Delete</button>
<!---If either the staff or editor role is matched-->
<buttonv-has:any="'staff,editor'">Delete</button>
<!---If both staff and editor role is matched-->
<buttonv-has:all="'staff,editor'">Delete</button>
There are also inverse directives, should you need them:
<!---If the delete permission is missing-->
<buttonv-cannot="'delete'">Contact an Admin</button>
<!---If either the delete or archive permission is missing-->
<buttonv-cannot:any="'delete,archive'">Contact an Admin</button>
<!---If both delete and archive permission are missing-->
<buttonv-cannot:all="'delete,archive'">Contact an Admin</button>
For roles:
<!---If the staff role is missing-->
<buttonv-hasnt="'staff'">Contact an Admin</button>
<!---If either the staff or editor role is missing-->
<buttonv-hasnt:any="'staff,editor'">Contact an Admin</button>
<!---If both staff and editor role are missing-->
<buttonv-hasnt:all="'staff,editor'">Contact an Admin</button>
Direct Invocation
If you need something more complex you can access the Vacl instance directly:
<buttonv-if="$vacl.can('delete') ||$vacl.has('admin')">Delete</button>
There are also a number of methods you can leverage on the $vacl instance:
MethodArgumentDescription
can()string[]
string		Shorthand accessor for hasAllPermissions().
hasAllPermissions()string[]
string		Assert the store has all of the passed permission(s).
hasAnyPermissions()string[]
string		Assert the store has any of the passed permission(s).
missingAllPermissions()string[]
string		Assert the store is missing all of the passed permission(s).
missingAnyPermissions()string[]
string		Assert the store is missing at least 1 of the passed permission(s).
has()string[]
string		Shorthand accessor for hasAllRoles().
hasAllRoles()string[]
string		Assert the store has all of the passed role(s).
hasAnyRoles()string[]
string		Assert the store has any of the passed role(s).
missingAllRoles()string[]
string		Assert the store is missing all of the passed role(s).
missingAnyRoles()string[]
string		Assert the store is missing at least 1 of the passed role(s).
getRoles()-Gets the array of currently stored roles.
getPermissions()-Gets the array of currently stored permissions.
setRoles()string[]Overwrites the role store with the passed array.
setPermissions()string[]Overwrites the permission store with the passed array.
addRoles()string[]
string		Adds the given role(s) to the role store.
addPermissions()string
string[]		Adds the given permission(s) to the permission store.
clearRoles()-Clears the currently stored roles.
clearPermissions()-Clears the currently stored permissions.
clear()-Clears both the role and permission store.
Advanced Configuration
When initialising (app.use(Vacl, config)) there are additional properties you can set:
PropertyDefaultDescription
permissions[ ]Array of permission strings that the user has, eg: ['view jobs', 'edit posts']
roles[ ]Array of role strings that the user has, eg: ['admin', 'sales']
forceRemovefalseBy default a directive that fails a check, like v-can, will set the element to display: hidden. If forceRemove is set to true then the element will be removed from the DOM entirely. This might be especially desirable when using on active components, but carries the cost of removing the element from the Vue reactivity watchers.
Reactivity
There are some limitations regarding the reactivity in Vue. For instance once an element is
removed via a custom directive (pretty much anything other than v-if) it is not currently possible to re-insert
it should the user gain the necessary role/permission - a page refresh is required. This is an issue with
all Vue acl-directive packages, but we are currently investigating work-arounds.
Roadmap
See the open issues for a list of proposed
features (and known issues).
Contributing
Contributions are what make the open source community such an amazing place to learn,
inspire, and create. Any contributions you make are greatly appreciated.
  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request
License
Distributed under the MIT License. See LICENSE for more information.
Contact
Twitter - @FullStackFool
NPM - https://www.npmjs.com/package/vacl
Acknowledgements
Below is a list of those who have helped with excellent peer review and feedback during development.
About
A lightweight, strictly-typed, Vue 3 ACL directives library.
Topics
acldirectivespermissionsrolestypescriptvue3
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
3 stars
Watchers
2 watching
Forks
2 forks
Report repository
Releases
Packages
Used by
Contributors
Languages