Vue.js项目构建后CASL库类实例权限校验失效如何解决

生产环境构建时JS代码会被压缩混淆，HomeTask类名会被替换为a、b这类无意义短字符，直接导致权限校验匹配失败。
这类通过类实例做权限判断的库，默认读取instance.constructor.name作为实例对应的资源类型标识，和提前定义的权限规则做匹配：

• 开发环境默认不开启代码压缩混淆，类名HomeTask完整保留，constructor.name取值为'HomeTask'，和规则can('delete', 'HomeTask', { teacher: user.id })完全匹配，所以功能运行正常。
• 生产环境压缩后类名被改写，constructor.name不再是'HomeTask'，规则匹配不到对应条目，校验自然失效。

• 优先选择：规则中直接传入类引用，不要用字符串字面量
  提前导入HomeTask类，把规则里的字符串'HomeTask'替换为类本身，构建工具会自动维护引用关系，完全不受类名压缩影响：

  // 从对应模块导入HomeTask类
  import HomeTask from './home-task-module'
  
  if (role === 'ROLE_teacher') {
    // 直接传类，不要传字符串
    can('delete', HomeTask, { teacher: user.id });
  }
  

• 兼容方案：给类显式声明固定的资源名
  给HomeTask类添加静态属性固定资源类型名称，权限库会优先读取这个静态属性做匹配，不会受类名压缩影响：

  class HomeTask {
    // 固定资源名，字符串值不会被压缩修改
    static modelName = 'HomeTask'
  
    constructor(teacherId) {
      this.teacher = teacherId;
    }
  }
  
  export default function createHomeTask(teacherId) {
    return new HomeTask(teacherId);
  }
  

• 兜底方案：调整压缩配置保留类名
  在构建工具的压缩配置中开启保留类名、函数名的选项，比如使用Terser压缩时添加如下配置即可。注意这个方案会增大打包产物体积，不推荐优先使用：

  // Terser压缩配置项
  {
    mangle: {
      keep_classnames: true,
      keep_fnames: true
    }
  }
  

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