记一次Vue.js混入mixin的使用(分权限管理页面)
更新时间：2019年04月17日 11:19:25 作者：青草怪味豆
这篇文章主要介绍了记一次Vue.js混入mixin的使用(分权限管理页面)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
需求背景：在一个后台的管理系统中，不同的用户角色对应不同的用户权限。现要求，同一个页面对有操作权限的用户来说是可操作的，对无操作权限的用户来说是只读的，即操作按钮均失效。系统用Vue.js开发。
一、mixin的概念
官方文档这么说：混入是一种分发Vue组件中可服用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
我自己的理解：混入对象具有Vue组件可以声明的所有选项，如[components]、[computed]、[methods]等；当组件使用混入对象时，该组件也同时拥有了混入对象的选项。
二、思路
按照开篇写的需求描述，如果用一般的方法，我们通常会在每个页面的vue文件中，判断当前用户是否具有操作该页面的权限，根据判断结果来展示页面。然而，这种方法会导致大量代码的重复，徒然增加了一些无意义的工作量。因此，需要有一个可以复用的方法。
故此，我们可以把上述的可复用的办法放在混入对象的选项当中。
三、代码展示
在混入对象的computed选项中，我们有这几个方法，来判断用户所拥有的的‘编辑'、‘查看'、‘删除'等权限。
computed: {
allowedToCreate() {
return this.hasOperatePermissions('createRole');
},
allowedToEdit() {
return this.hasOperatePermissions('editRole');
},
allowedToCheckIn() {
return this.hasOperatePermissions('checkInRole');
},
allowedToDelete() {
return this.hasOperatePermissions('deleteRole');
},
},
注意，如果普通组件中引用了混入对象，那么这些计算属性会自动成为组件的计算属性。具体如何创建一个混入对象，并且引入该混入对象，这里不细讲，可参考官方文档。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家分享一篇Vue修改mint-ui默认样式的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
本篇文章主要介绍了vue组件jsx语法的具体使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
Vue Vine提供了全新Vue组件书写方式,主要的卖点是可以在一个文件里面写多个vue组件,Vue Vine是一个vite插件,vite解析每个模块时都会触发插件的transform钩子函数,本文介绍Vue Vine是如何实现一个文件中写多个组件,感兴趣的朋友一起看看吧2024-07-07
这篇文章主要介绍了Vue使用el-dialog关闭后重置表单方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
下面小编就为大家分享一篇在vue中实现图片和文件上传的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
今天小编就为大家分享一篇vue 本地环境跨域请求proxyTable的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了利用Vue通过自定义指令实现内容替换的方法,通过Vue.directive指令定义函数来实现内容自定义,通过指令定义函数的三个钩子函数（inserted、componentUpdated、unbind）来实现自定义内容的挂载、更新和销毁,需要的朋友可以参考下2025-03-03
vue中的<template>标签与react中的<></>标签区别详解
这篇文章主要为大家介绍了vue中的<template>标签与react中的<></>标签区别详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
Vue中el-form标签中的自定义el-select下拉框标签功能
这篇文章主要介绍了Vue中el-form标签中的自定义el-select下拉框标签功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-04-04
这篇文章主要介绍了vue服务端渲染操作,结合简单实例形式分析了vue.js服务端渲染操作的原理、实现方法及相关操作注意事项,需要的朋友可以参考下2019-08-08
最新评论