将 casl 用于基于角色的权限时出错

Question

这就是我使用 casl

定义能力的方式

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

Answer 1

您 return 来自 config/ability 的函数，但 Vue.use 期望收到一个 Ability 实例。

错误表明，某些东西试图访问 t 上的 on 属性，其中 t 是来自 [=] 的 abilitiesPlugin 函数的参数17=].

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

P.S.：确保使用最新版本。 AbilityBuilder.define 已从 CASL v4

中删除

将 casl 用于基于角色的权限时出错

error in using casl for role based permission

vue.js

vue-component

vuejs2

casl