在Quasar Vue3组合式API中更新CASL Ability遇错误求助

错误原因 #

你遇到的TypeError: Cannot read properties of undefined (reading 'm')，本质是组件内通过useAbility()获取的update方法与全局注册的ability实例上下文不匹配，再加上用new AbilityBuilder(Ability)生成规则时未与全局ability实例关联，导致更新时触发CASL内部未定义属性访问错误。

另外，boot文件中注册的是defineAbility创建的实例，组件内更新时却用全新的AbilityBuilder(Ability)生成规则，两者底层实例关联逻辑不一致，进一步加剧了这个问题。

解决方案 #

方案1：直接操作全局ability实例（推荐） #

既然已经在boot文件中注册了全局ability实例，直接导入并调用其update方法即可，无需通过useAbility()获取update：

1. 修改组件内的updateAbility函数：

import ability from "src/services/ability";
import { AbilityBuilder } from "@casl/ability";

function updateAbility() {
  // 使用AbilityBuilder.extract()生成与全局实例兼容的规则
  const { rules, can, cannot } = AbilityBuilder.extract();

  can(["read", "update", "create", "delete"], "Notes");
  cannot("read", ["Photos", "Videos", "Users", "Files"]);

  // 直接调用全局ability实例的update方法
  ability.update(rules);
}

2. 保持boot文件和ability.js不变即可，更新后全局所有组件的can方法会同步生效。

方案2：统一Ability实例创建方式 #

如果希望通过useAbility()的update方法操作，需要确保全局实例和组件内使用的是同一类创建方式：

1. 修改ability.js，直接创建Ability实例：

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

// 初始化默认规则
export default new Ability([
  { action: ["read", "update", "create", "delete"], subject: "Notes", inverted: true },
  { action: ["read", "update", "create", "delete"], subject: ["Photos", "Videos", "Users", "Files"] }
]);

2. 组件内调整规则生成方式，保持原调用逻辑：

import { AbilityBuilder } from "@casl/ability";
import { useAbility } from "@casl/vue";

const { update } = useAbility();

function updateAbility() {
  const { rules, can, cannot } = AbilityBuilder.extract();

  can(["read", "update", "create", "delete"], "Notes");
  cannot("read", ["Photos", "Videos", "Users", "Files"]);

  update(rules);
}

验证 #

修改后调用updateAbility，再在其他组件中调用can("create", "Videos")，应该会返回false，符合新设置的规则。

内容的提问来源于stack exchange，提问作者andrewhl