We will help you to control the permission of access in your app for yours components and routes
# yarn
yarn add vue-acl
# npm
npm install vue-acl --saveCreate the acl.js file to define your acl settings and global rules:
import Vue from 'vue'
import { AclInstaller, AclCreate, AclRule } from 'vue-acl'
import router from './router'
Vue.use(AclInstaller)
export default new AclCreate({
initial: 'public',
notfound: {
path: '/error',
forwardQueryParams: true,
},
router,
acceptLocalRules: true,
globalRules: {
isAdmin: new AclRule('admin').generate(),
isPublic: new AclRule('public').or('admin').generate(),
isLogged: new AclRule('user').and('inside').generate()
},
middleware: async acl => {
await timeout(2000) // call your api
acl.change('admin')
}
})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: trueif 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:
import Vue from 'vue'
import Router from 'vue-router'
import { AclRule } from 'vue-acl'
import Public from './views/Public.vue'
import Admin from './views/Admin.vue'
import NotFound from './views/NotFound.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'public',
component: Public,
meta: {
rule: 'isPublic'
}
},
{
path: '/admin',
name: 'admin',
component: Admin,
meta: {
rule: new AclRule('admin').generate()
}
},
{
path: '/error',
name: 'notfound',
component: NotFound,
meta: {
rule: '*'
}
}
]
})More details:
- Define
rulemeta for link a route with a permission, your can use name of the global rule e.gisPublicor useAclRulefor create new rule orr use*for define allowed route.
For finish, in your main.js import the acl and pass to Vue root instance:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import acl from './acl'
Vue.config.productionTip = false
new Vue({
router,
acl,
render: h => h(App)
}).$mount('#app')If you defined acceptLocalRules as true, you can define computed properties with new rules, but this rules works only in component:
import { AclRule } from 'vue-acl'
export default {
computed: {
isLocalRule () {
return new AclRule('create').generate()
}
}
}You can also check rules for display custom elements in your layout:
<button v-if="$acl.not.check('isAdmin')">
Set admin permisson
</button>
<button v-else>
Set public permission
</button>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:
<button v-if="$acl.not.check('isAdmin')" @click="$acl.change('admin')">
Set admin permisson
</button>
<button v-else @click="$acl.change('public')">
Set public permission
</button>You can also add a new permission during execution, taking the current one and concatenating it with the new one: this.$acl.change(this.$acl.get.concat(['read', 'write']))
In your component can add observer for current Rule:
mounted () {
this.$acl.onChange = newPermission => {
console.log('Has changed to', newPermission)
}
}
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent