This plugin aims to control the layout of the system and block access to certain routes of the vue-router, that according to the current active permission on the system.
- VueJS version 2
- vue-router
- Vuex version 2
We have two methods of installed, you can use the npm or a standalone.
Use the following command to install as dependency:
npm install vue-acl --save
To install just copy the file src/Acl.js to your plugins directory.
[1]: The state of your Vuex set a variable called acl_current, it defines what the current permission on your system.:
...
state: {
acl_current: ''
}
...
[2]: Import the plugin and register it on VueJS, it is necessary to send as a parameter the vue router-router, the default system permission and store the Vuex:
import Store from '../vuex/store'
import Router from '../routes/router'
import Acl from 'vue-acl'
Vue.use( Acl, { router: Router, d_permission: 'any', store: Store } )
[3]: Add metadata in their routes the system needs have currently to call that route, use dot (.) to separate permissions:
export default [
{ path: '/' , component: Example , meta: { permission: 'admin.any' } },
{ path: '/resource' , component: Resource , meta: { permission: 'admin.any' } },
{ path: '/vuex' , component: Vuex , meta: { permission: 'admin' } }
]
[4]: The components use the global method can() to verify that the system gives access to permission passed by parameter:
<router-link v-show='can("admin.any")' to='/'>Router test</router-link> |
<router-link v-show='can("admin.any")' to='/resource'>Resource test</router-link> |
<router-link v-show='can("admin")' to='/vuex'>Vuex test</router-link>
This method receives a parameter with the permissions to check, separated by a dot (.), and returns a bool saying if permission has been granted.
To change the current system permission use the global method checkPermission(), passing as parameter the new permission:
this.changeAccess('admin')
NOTE: This method is a shortcut for $store.state.acl_current
To help in the development and expansion of this repository take a FORK to your account, after you have made your modifications do a PULL REQUEST, it will be parsed and included here since it helps the plugin.