Problem with vue-router

[molobala]

When using vue-router, I'm getting a trouble with vue-browser-acl.
Step to reproduce:

const user = ()=>store.getCurrentUser();
Vue.use(Acl, user, (acl) => {
  acl.rule('view_projects', {})
  acl.rule(['create_projects', 'manage_project'], {}, (user) => user.permissions && user.permissions.find(e => e === 'ADMIN' || e === 'OWNER' || e === 'WRITE_PROJECTS'))
  acl.rule('view_users', {})
  acl.rule(['create_users', 'manage_users'], {}, (user) => {
    console.log("User", user.permissions);
    return user.permissions.find(e => e === 'ADMIN' || e === 'OWNER' || e === 'WRITE_USERS')
  })
  acl.rule('view_documents', {})
  acl.rule(['create_documents', 'manage_documents'], {}, (user) => user.permissions && user.permissions.find(e => e === 'ADMIN' || e === 'OWNER' || e === 'WRITE_DOCUMENTS'))
  acl.rule('administrate', {}, (user) => user.permissions && user.permissions.find(e => e === 'ADMIN'))
  acl.rule('administrate_fiduciaire', {}, (user) => user.permissions && user.permissions.find(e => e === 'ADMIN' || e==="OWNER") && ((user.workspaceType || user.workspace.type) == "2"))
  acl.rule('administrate_client', {}, (user) => user.permissions && user.permissions.find(e => e === 'ADMIN' || e==="OWNER") && ((user.workspaceType || user.workspace.type) == "1"))
  acl.rule('is_client', {}, (user) => (user.workspaceType || user.workspace.type) == "1")
  acl.rule('is_fiduciaire', {}, (user) => (user.workspaceType || user.workspace.type) == "2")
}, {router})

I use empty object ({}) since I don't need any model to deal with, and everything is ok when using v-can directive or $can helper like this v-if="$can('administrate', {})" or v-can:administrate="{}"

But when I use the meta object of route using empty object {} the check fail always

 {
   path: 'create',
   component: EmployeCreate,
   name: 'Dashboard.Employes.create',
   meta: {
      auth: true,
      can: 'manage_users {}',
      fail:'/403'
   },
},

That never works , always fail

So I checked the repo code and found that the problème with this comes from that line

vue-browser-acl/index.js

Line 70 in 36f188e

if ((subject && acl.can(userAccessor(), verb, subject)) || (!subject && !options.strict)) {

Cause subject in my case will be a string not and Object, when I do JSON parse on subject, everything is okay then .

[mblarsen]

Thanks for raising this issue.

Please see the globals section for how to create rules without subject. The way you are doing it isn't the intended usage.

You are right that there is an issue with route handling. I'll look into it tomorrow.

Again, you shouldn't use 'manage_users {}' you can only use types/classes here, not instances. From the docs:

Limitation: Unlike with the directive and the helper you will not have access to class instances. E.g you cannot use a can: 'delete post' as this assumes you have a Post instance already.

I'll probably implement it so that you can use just 'manage_users' if there exist a global rule with that verb.

You should consider splitting up your rules by subject. They can be just strings. So you could have:

acl.rule('view', 'Project')
acl.rule(['create', 'manage'], 'Project', ...)
acl.rule('view', 'User', {})
acl.rule(['create', 'manage'], 'User', ...)
... and so on

It is much easier to read.

[molobala]

Thank you for your quick replay
Okay I will take a look at that section.

[mblarsen]

I've published a new version (0.8.0) with a fix for this.

It also adds a new feature to set the failRoute to $from redirecting the user back to where they came from.