ошибка при использовании casl для разрешения на основе ролей - PullRequest
Новая
       34

ошибка при использовании casl для разрешения на основе ролей

0 голосов
/ 10 июля 2020

Вот как я определил способность, используя casl

способность. js

import { AbilityBuilder } from '@casl/ability';
//   case 'Administrator':
// localStorage.getItem('role')
export default function() {
 AbilityBuilder.define(can => {
    switch(localStorage.getItem('role')) {
      case 'Admin':
      case 'CEO':
        can(['add', 'read','update', 'delete']);
        break;
     case 'Manager':
        can(['add', 'read','update', 'delete']);
        break;
     case 'Senior':
        can(['add', 'read']);
        break;
     case 'Clerk':
     case 'Administrator':
       can('read');
       break;  
    }
  })
}

Я зарегистрировался в main. js

import { abilitiesPlugin } from '@casl/vue';
import ability from './config/ability';

Vue.use(abilitiesPlugin, ability);

Теперь я хотел использовать его в компоненте: 

<v-icon
   v-if="$can('delete')"
   small
   class="mr-2"
   @click="editItem(item)"
   >
   edit
</v-icon>

Это дает мне ошибку: Error in render: "TypeError: t.on is not a function". Я реализовал это, используя несколько ресурсов в Интернете. Значит ошибка говорит, что банка не определена.

1 Ответ

0 голосов
/ 11 июля 2020

Вы возвращаете функцию из config/ability, но Vue.use ожидает получения экземпляра Ability.

Ошибка говорит о том, что что-то пытается получить доступ к свойству on в t, где t является аргументом функции abilitiesPlugin из @casl/vue.

Итак, замените строку Vue.use(abilitiesPlugin, ability); на Vue.use(abilitiesPlugin, ability()); в main. js. Это должно исправить ошибку.

PS : убедитесь, что используете последнюю версию. AbilityBuilder.define удален из CASL v4

...