使用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"。我使用很少的在线资源实现了这一点。因此，错误说明没有定义can。

Answer 1

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

错误表示试图访问t上的t属性，其中t是来自@casl/vue的abilitiesPlugin函数的参数。

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

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