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.
- Vue.js version 2
- vue-router
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 source/vuex-acl.js
to your plugins directory.
[1]: Import the plugin and register it on VueJS, it is necessary to send as a parameter the vue router-router and the default system permission:
import Router from '../routes/router'
import Acl from 'vuex-acl'
import Vuex from 'vuex'
const store = new Vuex.Store({
state: { acl_current: [] }
getters: {
aclLoaded(state) {
return () => {
return state.acl_current.length !== 0
}
}
}
})
Vue.use( Acl, { router: Router, init: 'public', store: store } )
[2]: Add metadata in their routes saying which permission, or group of permissions is required to access the route, use pipe (|) to do an OR check for more than one permission, use (&) to do an AND check for multiple permissions (these can be used in combination for more complex situations). Use the ' fail ' metadata to indicate which this route to redirect on error:
[
{
path: '/',
component: require('./components/Public.vue'),
meta: {
permission: 'public',
fail: '/error-public'
}
},
{
path: '/manager',
component: require('./components/Manager.vue'),
meta: {
permission: 'manager',
}
},
{
path: '/client',
component: require('./components/Client.vue'),
meta: {
permission: 'client',
}
},
{
path: '/error',
component: require('./components/Error.vue'),
meta: {
permission: 'public'
}
},
]
Note1: Use public
permission to users not logged, the vue-acl
handler automatic this route to public users.
Note2: Use fail
to declare redirect error excluvise to this route.
Use Vue.use( Acl, { router: Router, init: 'public', fail: '/error' } )
to redirect default erros to /error
route.
[3]: The components use the global method $can()
to verify that the system gives access to permission passed by parameter:
<router-link v-show='$can("client|manager")' to='/client'>To client</router-link> |
<router-link v-show='$can("manager")' to='/manager'>To manager</router-link> |
<router-link v-show='$can("public")' to='/'>To Public</router-link>
This method receives a parameter with the permissions to check, separated by a pipe (|) or ampersand (&), and returns a bool
saying if permission has been granted.
To change the current system permission use the global attribute access
, passing the new permission, or array of permissions:
this.access = 'admin'
or:
this.access = ['edit', 'delete']
or with & operator:
this.access = 'edit&delete'
To see the current system permission, just print this.access
variable.
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.
Before send PR, run npm run build
to transpile es6 to es5 code.