Plugin of Access Control List from Vue JS 2

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.

Dependencies:

  • VueJS version 2
  • vue-router

Installation

We have two methods of installed, you can use the npm or a standalone.

To install with NPM

Use the following command to install as dependency:

npm install vue-acl --save

For standalone installation

To install just copy the file src/es6.js to your plugins directory.

Get Started:

[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 'vue-acl'
Vue.use( Acl, { router: Router, init: 'any' } )

[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 route to redirect on error:

[
  {
    path: '/',
    component: require('./components/Public.vue'),
    meta: {
      permission: 'admin|any',
      fail: '/error'
    }
  },
  {
    path: '/manager',
    component: require('./components/Manager.vue'),
    meta: {
      permission: 'admin',
      fail: '/error'
    }
  },
  {
    path: '/client',
    component: require('./components/Client.vue'),
    meta: {
      permission: 'any',
      fail: '/error'
    }
  },
  {
    path: '/edit-delete',
    component: require('./components/EditDelete.vue'),
    meta: {permission: 'edit&delete', fail: '/error'}
  },
  {
    path: '/edit-delete-admin',
    component: require('./components/EditDeleteAdmin.vue'),
    meta: {permission: 'edit&delete|admin', fail: '/error'}
  },
  {
    path: '/error',
    component: require('./components/Error.vue'),
    meta: {
      permission: 'admin|any'
    }
  },
]

[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("any")' to='/client'>To client</router-link> |
<router-link v-show='$can("admin")' to='/manager'>To manager</router-link> |
<router-link v-show='$can("admin|any")' to='/'>To Public</router-link>
<router-link v-show='$can("edit&delete")' to='/'>To Edit and delete</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 method $access(), passing as parameter 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 call the $access() method with no parameter.

GitHub