vue-acl: access control list in vuejs
We will help you to control the permission of access in your app for yours components and routes
Installation
# yarn yarn add vue-acl# npm npm install vue-acl --save
Get Started
Create the acl.js
file to define your acl settings and global rules:
Vue
More details:
- AclInstaller: plugin class for install in Vue with Vue.use
- AclCreate: class to define acl settings
- initial: first permission, for startup with your app
- notfound: route for 404 error, add
forwardQueryParams: true
if you want to forward all query params, - router: your VueRouter instance
- acceptLocalRules: if you can define new rules inside vue components
- globalRules: define globals rules for access in routes and any components
- middleware: async method executed in all route change event, to get user in your api and change permission
- AclRule: class with rule builder, the instance receive initial permission.
- or: method for add OR condition in rule, e.g: if current permission is public OR admin the rule isPublic equals true
- and: method for add AND condition in rule, e.g: if current permission contains user AND inside the rule isLogged equals true
- generate: this method should called to create and compile your rule query
In your router.js
file, you can define permissions for yours routes:
Vue
More details:
- Define
rule
meta for link a route with a permission, your can use name of the global rule e.gisPublic
or useAclRule
for create new rule orr use*
for define allowed route.
For finish, in your main.js
import the acl
and pass to Vue root instance:
VueconfigproductionTip = false router acl
Use in components
If you defined acceptLocalRules
as true
, you can define computed properties with new rules, but this rules works only in component:
computed: { return 'create' }
You can also check rules for display custom elements in your layout:
Set admin permisson Set public permission
E.g: if isAdmin
is not true the button 'Set admin permisson' is displayed.
Finish, you can change current permission in any component using change
method:
Set admin permisson Set public permission
In your component can add observer for current Rule:
{ this$acl { console }}