如何实现Vue.js中mixin在分权限管理页面的应用与操作？

本文共计679个文字，预计阅读时间需要3分钟。

需求背景：在一个后台管理系统中，不同用户角色对应不同的用户权限。现需同一页面中，对有操作权限的用户显示可操作，对无操作权限的用户显示只读。

具体要求：- 对有操作权限的用户显示可操作- 对无操作权限的用户显示只读

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

一、mixin的概念

官方文档这么说：混入是一种分发Vue组件中可服用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

我自己的理解：混入对象具有Vue组件可以声明的所有选项，如[components]、[computed]、[methods]等；当组件使用混入对象时，该组件也同时拥有了混入对象的选项。

二、思路

按照开篇写的需求描述，如果用一般的方法，我们通常会在每个页面的vue文件中，判断当前用户是否具有操作该页面的权限，根据判断结果来展示页面。然而，这种方法会导致大量代码的重复，徒然增加了一些无意义的工作量。因此，需要有一个可以复用的方法。

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

三、代码展示

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