记一次Vue.js混入（mixin）的使用—分权限管理页面

需求背景：在一个后台的管理系统中，不一样的用户角色对应不一样的用户权限。现要求，同一个页面对有操做权限的用户来讲是可操做的，对无操做权限的用户来讲是只读的，即操做按钮均失效。系统用Vue.js开发。

1、mixin的概念

官方文档这么说：混入是一种分发Vue组件中可服用功能的很是灵活的方式。混入对象能够包含任意组件选项。当组件使用混入对象时，全部混入对象的选项将被混入该组件自己的选项。

我本身的理解：混入对象具备Vue组件能够声明的全部选项，如[components]、[computed]、[methods]等；当组件使用混入对象时，该组件也同时拥有了混入对象的选项。

2、思路

按照开篇写的需求描述，若是用通常的方法，咱们一般会在每一个页面的vue文件中，判断当前用户是否具备操做该页面的权限，根据判断结果来展现页面。然而，这种方法会致使大量代码的重复，徒然增长了一些无心义的工做量。所以，须要有一个能够复用的方法。

故此，咱们能够把上述的可复用的办法放在混入对象的选项当中。

3、代码展现

在混入对象的computed选项中，咱们有这几个方法，来判断用户所拥有的的‘编辑’、‘查看’、‘删除’等权限。

computed: {
    allowedToCreate() {
      return this.hasOperatePermissions('createRole');
    },
    allowedToEdit() {
      return this.hasOperatePermissions('editRole');
    },
    allowedToCheckIn() {
      return this.hasOperatePermissions('checkInRole');
    },
    allowedToDelete() {
      return this.hasOperatePermissions('deleteRole');
    },    
 },

注意，若是普通组件中引用了混入对象，那么这些计算属性会自动成为组件的计算属性。具体如何建立一个混入对象，而且引入该混入对象，这里不细讲，可参考官方文档。