记住使用Vue.js混合mixin一次(子权限管理页面)

需求背景：在后台管理系统中，不同的用户角色对应不同的用户权限。现在要求同一个页面对于有操作权限的用户是可操作的，对于没有操作权限的用户是只读的，也就是所有的操作按钮都是无效的。该系统是用Vue.js开发的

首先，混合蛋白的概念

根据官方文件，混合是一种非常灵活的方式来分配Vue组件中的食用功能。混合对象可以包含任何组件选项。当组件使用混合对象时，混合对象的所有选项将被混合到组件本身的选项中。

我自己的理解：混合对象有Vue组件可以声明的所有选项，比如【组件】、【计算】、【方法】等；当组件使用混合对象时，组件也可以选择混合对象。

第二，观念

根据开头写的需求描述，如果用一般的方法，通常会在每个页面的vue文件中判断当前用户是否有操作页面的权限，并根据判断结果显示页面。但是这种方法会导致大量的代码重复，白白增加一些无意义的工作量。因此，有必要有一个可重用的方法。

因此，我们可以将上述可重用的方法放在混合对象的选项中。

第三，代码显示

在混合对象的计算选项中，我们有这些方法来判断用户的权限，如“编辑”、“查看”和“删除”。

computed : { allowedcreate(){ return this . hasoperatepermissions(' createRole ')；}，allowedToEdit(){ return this . hasoperatepermissions(' editRole ')；}，allowedToCheckIn(){ return this . hasoperatepermissions(' checkInRole ')；}，allowedToDelete(){ return this . hasoperatepermissions(' deleteRole ')；}，}，注意，如果公共组件中引用了混合对象，这些计算属性将自动成为组件的计算属性。如何创建一个混合对象并进行介绍，这里不详细介绍，参考官方文档。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。