0

这就是我使用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"。我已经使用很少的在线资源实现了这一点。所以错误说罐子没有定义。

4

1 回答 1

0

您返回一个函数，config/ability但Vue.use希望接收一个Ability实例。

该错误表示某些东西试图访问on上的属性t，其中函数t的参数abilitiesPlugin来自@casl/vue。

因此，Vue.use(abilitiesPlugin, ability);用Vue.use(abilitiesPlugin, ability());in main.js 替换该行。这应该可以修复错误。

PS：确保使用最新版本。AbilityBuilder.define从 CASL v4 中删除

于 2020-07-11T17:52:15.177 回答