Never Publish Malarkey

    vue-role

    0.0.1-beta.8 • Public • Published

    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)
      }
    }

    Install

    npm i vue-role

    DownloadsWeekly Downloads

    14

    Version

    0.0.1-beta.8

    License

    ISC

    Unpacked Size

    17.2 kB

    Total Files

    14

    Last publish

    Collaborators

    • chantouchsek