I have a code

router.beforeEach((to, from, next) => {
  to.matched.some((page) => {
    const perimeter = page.meta.perimeter
    const Governess = page.meta.governess || RouteGoverness
    const action = page.meta.action || 'view'

    if (perimeter) {
      const sandbox = createSandbox(child(store), {
        governess: new Governess({
          from,
          to,
          next
        }),

        perimeters: [
          perimeter
        ]
      })
      console.log(sandbox)

      return sandbox.guard(action)
    }

    return next()
  })
})

export default router

this part console.log(sandbox) never works, so return sandbox.guard(action) never works too. No errors in console... Any idea why?

Is it possible to add an example for Nuxt.js in repo?

Using the information from the Readme, I was able to configure Perimeter, but do not understand how to configure Sandbox and Governess for Nuxt.js app

Hello @JiriChara, first of all thank you for your work on kindergarten and vue-kindergarten.

I'm working right now on a Vuejs project where I have multiple perimeters, some of which have the same rule name (e.g. read()). Everything works fine except when I use 2 or more perimeters into the same component. The typical example could be a top menu, that needs to know whether to render a link based on user role.

In such a case, it seems that the $user.isAllowed('read') and $account.isAllowed('read') interfere each other, so that both return the same thing (please, see the code below).

The only workaround I found is to differentiate the names as "readUser" and "readAccount" (instead of just "read"). But this seems to be redundant, considering we already have the "purpose" that could work as a scope.

To give you a context, here follows a small piece of code:

// topmenu.vue
<template>
    <v-toolbar class="blue darken-4" light>
        <v-toolbar-items class="hidden-sm-and-down">
            <v-toolbar-item v-show="$user.isAllowed('read')" :router="true" :href="{ name: 'users.index' }" ripple>Users</v-toolbar-item>
            <v-toolbar-item v-show="$account.isAllowed('read')" :router="true" :href="{ name: 'accounts.index' }" ripple>Accounts</v-toolbar-item>
        </v-toolbar-items>
    </v-toolbar>
</template>
<script>
    export default {
        computed: {
            ...mapGetters('auth', ['isLoggedIn', 'profile']),
        },
      ...
        perimeters: [
            accountsPerimeter,
            usersPerimeter
        ]
    }
</script>


// BasePerimeter.js
import { Perimeter } from 'vue-kindergarten'
import store from 'vuex'
import _ from 'lodash'

export default class BasePerimeter extends Perimeter {
    isSuperAdmin() {
        const res = this.hasRole('super_admin');
        return res;
    }

    hasRole(roleName) {
        if (!this.child) {
        return false;
    }
        const res = _.includes(this.child.role_names, roleName);
        return res;
    }
}


// Account.js
import BasePerimeter from './BasePerimeter';
export default new BasePerimeter({
    purpose: 'account',
    can: {
        read() {
            const _isSuperAdmin = this.isSuperAdmin();
            return _isSuperAdmin;
        }
    },
});


// User.js
import BasePerimeter from './BasePerimeter';
export default new BasePerimeter({
    purpose: 'user',
    can: {
        read() {
            const _isSuperAdmin = this.isSuperAdmin();
            return !_isSuperAdmin;
        }
    },
});

Another strange thing is that, looking at the console, $account and $user objects seem to be indefinitely nested each other, like this:

Is there something I misunderstood?

Thank you in advance, Enzo

I am still quite new to Vue.js. Maybe I made a mistake somewhere with reactivity of Vuex state.

I am using Vue.js 2 with Vuex, vue-router, etc. I dispatch login action to authenticate a user. My problem is: after logging in, the authroization is not reflected.

To debug the problem, I added the following condole.debug:

// in app.js
Vue.use(VueKindergarten, {
    child: (store) => {
        const child = store.state.auth.user;
        console.debug('VueKindergarten: child = ', child);
        return child;
    },
});

and

// in perimeters/BasePerimeter.js
export default class BasePerimeter extends Perimeter {
    isAdmin() {
        console.debug('BasePerimeter.isAdmin():');
        console.debug('  this.child is ', (this.child && this.child.full_name));
        console.debug('  this.child = ', this.child);
        return this.child && this.child.role &&
            this.child.role.name === 'Administrator';
    }
...

What I see is that BasePerimeter.isAdmin() is called before child is set to the logged in user. The problem is after child is set to the logged in user, BasePerimeter.isAdmin() is not called again and authorization is not refreshed.

Is it possible that the problem is related with any potential issue with vue-kindergarten's child reactivity, or some mistakes in my Vuex store implementation? If needed, I can show the relevant part of my Vuex store modules. It's a bit lengthy.

Thanks! Zhu Ming

Hi @JiriChara,

First, thanks for this lib, which is very interesting to use.

I am stuck in my authorization based application using your lib. In your excellent article, you say:

This code works, however as I mentioned earlier the governess is responsible for the default behavior when user is trying to access protected resource.

In order to handle a "not allowed" case correctly, I have implemented the guard() method of my RouteGoverness according to your example. However, I don't have just one default behavior but several different behaviors based on "why you were not allowed to do this".

In other words, I would like to be able to:

• redirect to /login if the child is not authenticated
• redirect to /home if the child is authenticated
• redirect to /admin/home if the child is admin

and so on...

The logic is actually executed by the guard() method of my RouteGoverness and I am pretty sure there's a better way to do it. On top of that, it doesn't work as expected.

Here's a sample of what I tried to do:

import { HeadGoverness } from 'vue-kindergarten';

export default class RouteGoverness extends HeadGoverness {
  constructor({from, to, next}) {
    super();

    this.next = next;
    this.from = from;
    this.to = to;
  }

  guard(action) {
    if (super.isNotAllowed(action)) {
      // Redirection based on the "to" route the user wanted to reach
      console.warn('UNAUTHORIZED access to', this.to.name);

      switch (this.to.name) {
        case 'login':
          this.redirectTo('index');
          break;
        case 'index':
          this.redirectTo('login');
          break;
        default:
          this.redirectTo('unauthorized');
          break;
      }
    } else {
      this.next();
    }
  }

  redirectTo(routeName) {
    this.next({
      name: routeName
    });
  }
};

Is there a way to do it efficiently or am I wrong about the process ? Thanks.

In your example, you use to.name to create a single perimeter.

router.beforeEach((to, from, next) => {
  const perimeter = perimeters[`${to.name}Perimeter`];
  if (perimeter) {
    const sandbox = createSandbox(child(store), {
      perimeters: [
        perimeter,
      ],
    });
    if (!sandbox.isAllowed('route')) {
      return next('/');
    }
  }
  return next();
});

But what if I have a routes tree where a parent route has a perimeter and a child route has another one? Or even multiple... I guess I need to look into the to.matched array... but can you give me an example on how to correctly deal with it? Thanks.

I noticed there are new releases 0.2.0 and 0.3.0 on npmjs.com. But in this GitHub repo, these 2 new releases are not listed under Releases. I tried to upgrade to these new releases using yarn upgrade, and met strange errors when running in browser, like:

Cannot read property 'isAllowed' of undefined

I wrote my code when I was using 0.1.3. Currently I am using 0.1.4 without a problem. Maybe I need to make some changes to adapt to 0.3.0? Is there any instructions or release notes on how to upgrade to these new releases?

Thanks! Zhu Ming

Not sure if I should post this here. This is about the tutorial in the link https://codeburst.io/role-based-authorization-for-your-vue-js-and-nuxt-js-applications-using-vue-kindergarten-fd483e013ec5

If I added this code, import * as perimeters from '../perimeters';

Then an error is thrown.

probably es6 errors, or duplication of imports. I just don't know.

[HMR] bundle has 1 errors client.js?7955:176 ./src/router/index.js Module not found: Error: Can't resolve '../perimeters' in 'E:\kay\vue\vuecomplete\src\router' @ ./src/router/index.js 15:0-44 @ ./src/main.js @ multi ./build/dev-client ./src/main.js

I made a stackoverflow post https://stackoverflow.com/questions/47666323/why-cant-i-import-these-javascript-files?noredirect=1#comment82292155_47666323 about this

Hi there! I'm working on my first Vue project and while looking for a good way to do role based stuff I came across your magnificent framework and tutorial. I've been following along and everything works like a charm except one thing. I'm obtaining the user's role through a REST api. This means of course that the child cannot be set on initialization because the role is not yet obtained and stored in the Vuex store.

Any workaround for this? Any way to lazyload the child while still keeping it accessible everywhere?

Thanks in advance

Is there an issue with vue-kindergarten and vue-tables-2? https://www.npmjs.com/package/vue-tables-2

I had an error when using both of these, was able to track down in my code if I included this component:

<v-server-table name="UserAdmin" url="admin/master/?format=json" :columns="columns" :options="options" ref="adminTable"></v-server-table>

Error Message: Cannot read property 'state' of null

I'm trying to use Vue-Kindergarten in an application with Nuxt.js. But when trying to control which routes(screens) open I cannot use an url to directly open a screen, because when my Perimeter executes to validate the access of the current child, she is not fully resolved and return a undefined value, so my perimeter return false, then the RouteGoverness redirects to my home page, just like a not logged user would need.

Note: I get no problems when navigating through my system with normal links, just with a direct url to specific screens.

Is there something I am missing?

Thanks. Great project.

Hi, Thank you for this library. How can I disable automatic inject of perimeter to vue instance?

example:

import backyard from './perimeters/backyard.js'

  export default {
    computed: {
      ...mapState([
        'articles'
      ])
    },

    // add your perimeters
    perimeters: [
      backyard
    ]
  }

it is nice I can access this.$backyard.isAllowed('pick', 'plant') but I dont want to overwrite existing plugins that uses the same name ($backyard) and this.$sandbox.backyard.isAllowed('pick', 'plant') instead. How can is do it?

I have a nuxt application where a user can create custom roles. e.g CustomRoleA , CustomRoleB etc. Is there a way to handle this using vue-kindergarten. Is there a way to generate the perimeters dynamically?

import { Perimeter } from 'vue-kindergarten'
export default class BasePerimeter extends Perimeter {
  isSuperAdmin () {
    return this.child === 'SuperAdministrator'
  }

  isPartyAdmin () {
    return this.child === 'PartyAdministrator'
  }

  isTeamAdmin () {
    return this.child === 'TeamAdministrator'
  }

  isPartyUser () {
    return this.child === 'PartyUser'
  }
}

import BasePerimeter from './base'

    export default new BasePerimeter({
      purpose: 'user',

      can: {
        read: () => true,

        add () {
          return this.isSuperAdmin() || this.isPartyAdmin() || this.isTeamAdmin()
        },

        update () {
          return this.isSuperAdmin() || this.isPartyAdmin() || this.isTeamAdmin()
        },

        allowDelete () {
          return this.isSuperAdmin() || this.isPartyAdmin() || this.isTeamAdmin()
        },
        changePassword () {
          return this.isSuperAdmin() || this.isPartyAdmin() || this.isTeamAdmin()
        }
      }
    })

Hi

I used $isAllowed with v-show. There is a error in console because whenever created, mounted hook, it performs twice. So, before post object receive value, post is undefined.

What should I do ?

*.vue

<template>
    <button v-show="$notice.isAllowed('update', post)" @click.prevent="$router.push({ name: `post-update-${$route.meta.type}` ,params:{'postNo':$route.params.postNo}})">update<button>
</template>
<script>
export default {
  name: 'post-detail',
  data () {
    return {
      post: {}
    }
  },
  perimeters: [
    noticePerimeter
  ]
  },
  created () {
    ajax('GET', `/posts/${this.$route.params.postNo}`, null).then(_data => {
        this.post = _data
      }).catch(_err => {
        this.$router.push({ name: `post-list-${this.$route.meta.type}` })
      })
  }
}
</script>

Perimeter

import BasePerimeter from './base-perimeter'

export default new BasePerimeter({
  purpose: 'notice',
  can: {
    read () { return this.isLogin() },
    create () { return this.isAllowed('read') },
    update (post) {
      return this.isAdmin() || this.isCreator(post)
    },
    destroy (post) { return this.isAllowed('update', post) }
  }
})

error

Hi @JiriChara ! I use nuxt. I installed and connected the plugin. I have implemented role based access for routing but I am facing issues while implementing show/hide menu items depending on the logged in user

This code does not work for me:

v-show="$isAllowed('read')"
v-show="$article.isAllowed('update', article)"

What can I do to make it work? Thanks

for me this solves #39

Is there a better solution? I do not like about my solution that I might have to write different actions for routes which uses route and others that use an object.

Does somebody see a better solution?

Hi,

I'm trying to follow your examples re guarding routes in nuxt. You add a perimeter with routePerimeterAction = 'update' in the example at https://github.com/JiriChara/vue-kindergarten#usage-with-nuxtjs

However, when this code then runs, using the example article perimiter further up the page, the "article" property of update(article) is always undefined. Is this expected? Is there a way to wire up values from the route into the perimeter action?

Thanks