victorybiz/vue-simple-acl

A simple unopinionated Vue plugin for managing user roles and permissions, access-control list (ACL) and role-based access control (RBAC).

vue-simple-acl's Issues

Difference between v-role and v-permission

Hi, i read the doc and i tried the playground but i'm not understanding the difference between v-role and v-permission. It seems they work in the same way.
Both need a definite rule. So what's the difference?

Thank you

Permissions as an array of abilities doesn't work properly

There is a bug in VueSimpleAcl.ts at line 137

vue-simple-acl/src/VueSimpleAcl.ts

Line 137 in a566763

if (validCount) {

The if condition is not good

callbackResponse =  evaluateAbilityCallback(callback, ability.abilities, ability.args);
        if (validCount) {
          validCount++;
        }

the fix is

       callbackResponse =  evaluateAbilityCallback(callback, ability.abilities, ability.args);
        if (callbackResponse ) {
          validCount++;
        }

Page Reload Issue

Hi,

const user = computed(() => store.state.auth.user);

My data is lost when I refresh the page. But in vuex stores. Can you help me?

Thanks for sharing and developing this project. it really worked for me.

VueRouter meta evaluation by providing a callback that returns a promise doesn't work as expected

If the "can" rule returns false, no page will be rendered ( empty page )

{
  path: 'posts/:postId',
  component: PostEditor,
  meta: {
    can: (to, from, can) => {        
      return axios.get(`/api/posts/${to.params.id}`)
        .then((response) => can('edit-post', response.data));
    },
    onDeniedRoute: '/unauthorized'
  }
}

This can be easy tested with the playground example here: https://github.com/victorybiz/vue-simple-acl/blob/master/playground/src/main.ts#L30

can not send parameter in script

Hi

I am using with Vuejs3 setup

when I wanna use like this in component

acl.permission('update-post',post_id)

it doesn't work properly

acl.js

setRule('update-post', (user,post_id) =>{ console.log('post_id',post_id); return true })

and in console I get :

post_id undedfined

beforeEach is not triggering when there is a route change.

pluginOptions.router.beforeEach is never triggered for me.
Vue3 with typescript.

Error when try to build with this plugin

Hi I discovered a issue when I try to build with npm run build

I have a vue3 installation with TypeScript, pinia and vue-router

My package.json installation is:

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "production": "npm run build",
        "test": "vitest",
        "coverage": "vitest run --coverage"
    },
    "devDependencies": {
        "@tailwindcss/aspect-ratio": "^0.4.0",
        "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/line-clamp": "^0.4.0",
        "@tailwindcss/typography": "^0.5.4",
        "@vitejs/plugin-vue": "^3.0.1",
        "autoprefixer": "^10.4.8",
        "axios": "^0.27",
        "c8": "^7.12.0",
        "laravel-vite-plugin": "^0.5.0",
        "lodash": "^4.17.19",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.1.7",
        "vite": "^3.0.0",
        "vitest": "^0.19.1"
    },
    "dependencies": {
        "@headlessui/vue": "^1.6.7",
        "@heroicons/vue": "^1.0.6",
        "@sentry/tracing": "^7.8.0",
        "@sentry/vue": "^7.8.0",
        "leaflet": "^1.8.0",
        "pinia": "^2.0.17",
        "vue": "^3.2.37",
        "vue-router": "^4.1.3",
        "vue-simple-acl": "^1.2.0"
    }
}

My configuration is:

import { storeToRefs } from 'pinia'
import { createAcl, defineAclRules } from 'vue-simple-acl'
import { useAuthStore } from '@/store'
import router from '@/router'

const rawRules = [
    'roles-list', 'roles-create', 'roles-show', 'roles-update', 'roles-delete',
]

const rules = () => defineAclRules((setRule) => {
    const { user } = storeRefs()
    // setRule('users-list', (user) => user?.permissions.includes('users-list'))
    // setRule('users-create', (user) => user?.permissions.includes('users-create'))
    // setRule('users-show', (user, _user) => user?.permissions.includes('users-list') || user?.id === _user?.id)
    // setRule('users-update', (user, _user) => {
    //     return user?.permissions.includes('users-update') || user?.id === _user?.id
    // })
    // setRule('users-delete', (user, _user) => user?.permissions.includes('users-delete') || user?.id === _user?.id)
    // rawRules.forEach(rule => setRule(rule, (user) => user?.permissions.includes(rule)))
})

export default createAcl({
    user: () => storeRefs().user,
    rules,
    router,
    onDeniedRoute: '/unauthorized',
})

const storeRefs = () => {
    const authStore = useAuthStore()
    const { user } = storeToRefs(authStore)
    return { user }
}

The error that I got is:

Error: 'defineAclRules' is not exported by node_modules/vue-simple-acl/dist/vue-simple-acl.min.js

The status desired is:
The code can be build with the command npm run build for production

`.disable` modifier not applying to some components

First of all thank you for making this package, it has been a great help in organizing permissions.

I am using version 2.0.2

I've noticed that using the .disable modifier on a permission directive causes some components to not become disabled when that permission is not held. The component will still disappear with without the .disable modifier, as expected.

The expected behavior is that the the "disable" prop should be applied to the component when the given permission is not met and the .disable modifier is present.

The actual behavior is that not all components receive this prop, even though it is a valid prop that can be applied to the component.

A workaround I have found is to explicitly set "disable" or "disabled" prop using the helper function "$acl.role()", though looking at the code, that should be what the directive is doing anyways

vue-simple-acl/src/VueSimpleAcl.ts

Lines 345 to 346 in 016178c

	if (disableModifier) {
	el.disabled = true;

Is there something I am doing wrong?

Reproduction Link: https://codesandbox.io/s/modest-matsumoto-6ions3?file=/src/pages/Index.vue:2304-2345

How to use pinia store ?

ACL running before pinia store.

Using this as a plugin in Nuxt 3 breaks HMR

Would love to use it in a Nuxt 3 application but can't when the HMR is broken and really slows me down.
There are no errors, but seeing my DOM changes requires a page reload.

ReferenceError: Vue is not defined

Can you help me?

Directives are not working

Hi, thanks for this great tool.
None of the directives I put in are working.
I put some example:

<div v-can:operador  v-role:operador   class="test">
</div>

My rule:

setRule('operador', user => {
          debugger;
          return false;
        });

I put a debugger inside the rule to see if execution stops, but to no avail.
However, if it stops when I do:
this.$acl.role("operador") or this.$can('operador')

Am I missing something to configure?

Buggy and abandoned

This is a buggy and abandoned plugin. Do not to even try to use this. You will just lose your time.

SSR support

Feature request

Well, I am having a great time using this, my request is, could you include a super-admin role option, by default false? The role would override every permission. Currently, I am using laravel spatie permission and this being my first time handling the SPA side of the application, in my opinion, this would reduce the directive conditions specified.

Change rules after initial setup

How can i change rules after initial setup?

typing error in composition api for $can

Hi,

I'm using $can in component and I'm getting this error

Property '$can' does not exist on type '{ $: ComponentInternalInstance; $data: {} ....

package.json
{ "name": "", "version": "1.0.0", "private": true, "scripts": { "dev": "vite", "build": "run-p type-check build-only", "preview": "vite preview", "build-only": "vite build", "type-check": "vue-tsc --noEmit", "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore", "format": "prettier --write src/" }, "dependencies": { "@element-plus/icons-vue": "^2.1.0", "axios": "^1.3.5", "element-plus": "^2.3.3", "highcharts": "^10.3.3", "jenesius-vue-modal": "^1.8.2", "node-sass": "^8.0.0", "pinia": "^2.0.34", "sass": "^1.61.0", "sass-loader": "^13.2.2", "vue": "^3.2.47", "vue-3-export-excel": "^1.0.8", "vue-router": "^4.1.6", "vue-simple-acl": "^2.0.2" }, "devDependencies": { "@rushstack/eslint-patch": "^1.2.0", "@types/node": "^18.14.2", "@vitejs/plugin-vue": "^4.0.0", "@vue/eslint-config-prettier": "^7.1.0", "@vue/eslint-config-typescript": "^11.0.2", "@vue/tsconfig": "^0.1.3", "eslint": "^8.34.0", "eslint-plugin-vue": "^9.9.0", "npm-run-all": "^4.1.5", "prettier": "^2.8.4", "typescript": "~4.8.4", "vite": "^4.1.4", "vue-tsc": "^1.2.0" } }