Skip to content
Go to file


Failed to load latest commit information.
Latest commit message
Commit time

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


# 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:

import Vue from 'vue'
import { AclInstaller, AclCreate, AclRule } from 'vue-acl'
import router from './router'


export default new AclCreate({
  initial: 'public',
  notfound: {
    path: '/error',
    forwardQueryParams: true,
  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

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:

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'


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 rule meta for link a route with a permission, your can use name of the global rule e.g isPublic or use AclRule 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:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import acl from './acl'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)

Use in components

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 v-else>
  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:

<button v-if="$acl.not.check('isAdmin')" @click="$acl.change('admin')">
  Set admin permisson
<button v-else @click="$acl.change('public')">
  Set public permission

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)


Access Control List plugin for VueJS 2.0




No releases published


No packages published
You can’t perform that action at this time.