How to configure CASL v6 on Quasar V2 (with Vue 3)

189 Views Asked by At

How to configure CASL v6 on Quasar V2 with Vue 3?

CASL: https://casl.js.org/v6/en/package/casl-vue

Example of an unsuccessful attempt:

src/services/ability.js

import { defineAbility } from "@casl/ability";

const user = {
  id_user: 2,
  isLoggedIn: true,
};

export default (user) =>
  defineAbility((can) => {
        can("update", "Comment", { created_by: user.id_user });
  });

Update quasar.config.js

boot: ["casl"],

Add a boot file

src/boot/casl.js

import { createApp } from "vue";
import { abilitiesPlugin } from "@casl/vue";
import ability from "src/services/ability";

createApp()
  .use(abilitiesPlugin, ability, {
    useGlobalProperties: true,
  })
    .mount("#app")

The previous configuration does not work; returns the error:

[Quasar] boot error: Error: Please provide an Ability instance to abilitiesPlugin plugin

Component:

Purpose: if the user has created the comment, he can update it

<template> 
    <q-btn
        v-if="$can('update', 'Comment')"
        label="Comment Post"
        @click="CommentPostFunction"
    >
    </q-btn>
</template >

<script>

</script>
0

There are 0 best solutions below