vue-role: access control list in vuejs

We will help you to control the permission of access in your app for yours components and routes

Installation

# yarn
yarn add vue-role
# npm
npm install vue-role --save

Get Started

Create the role.js file to define your role settings and global roles:

import Vue from 'vue'
import { RoleInstaller, RoleCreate, Role } from 'vue-role'
import router from './router'

Vue.use(RoleInstaller)

export default new RoleCreate({
  initial: 'public',
  notfound: {
    path: '/error',
    forwardQueryParams: true,
  },
  router,
  acceptLocalRoles: true,
  globalRoles: {
    isAdmin: new Role('admin').generate(),
    isPublic: new Role('public').or('admin').generate(),
    isLogged: new Role('user').and('inside').generate()
  },
  middleware: async role => {
    await timeout(2000) // call your api
    role.change('admin')
  }
})

More details:

• RoleInstaller: plugin class for install in Vue with Vue.use
• RoleCreate: class to define role 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
  • acceptLocalRoles: if you can define new roles inside vue components
  • globalRoles: define globals roles 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
• Role: class with role builder, the instance receive initial permission.
  • or: method for add OR condition in role, e.g: if current permission is public OR admin the role isPublic equals true
  • and: method for add AND condition in role, e.g: if current permission contains user AND inside the role isLogged equals true
  • generate: this method should called to create and compile your role query

In your router.js file, you can define permissions for yours routes:

import Vue from 'vue'
import Router from 'vue-router'
import { Role } from 'vue-role'

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: {
        role: 'isPublic'
      }
    },
    {
      path: '/admin',
      name: 'admin',
      component: Admin,
      meta: {
        role: new Role('admin').generate()
      }
    },
    {
      path: '/error',
      name: 'notfound',
      component: NotFound,
      meta: {
        role: '*'
      }
    }
  ]
})

More details:

• Define role meta for link a route with a permission, your can use name of the global role e.g isPublic or use Role for create new role orr use * for define allowed route.

For finish, in your main.js import the role and pass to Vue root instance:

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

Vue.config.productionTip = false

new Vue({
  router,
  role,
  render: h => h(App)
}).$mount('#app')

Use in components

If you defined acceptLocalRoles as true, you can define computed properties with new roles, but this roles works only in component:

import { Role } from 'vue-role'

export default {
  computed: {
    isLocalRole () {
      return new Role('create').generate()
    }
  }
}

You can also check roles for display custom elements in your layout:

<button v-if="$role.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="$role.not.check('isAdmin')" @click="$role.change('admin')">
  Set admin permisson
</button>
<button v-else @click="$role.change('public')">
  Set public permission
</button>

In your component can add observer for current Role:

mounted () {
  this.$role.onChange = newPermission => {
    console.log('Has changed to', newPermission)
  }
}