记一次Vue.js混入mixin的使用(分权限管理页面)


Posted in Javascript onApril 17, 2019

需求背景:在一个后台的管理系统中,不同的用户角色对应不同的用户权限。现要求,同一个页面对有操作权限的用户来说是可操作的,对无操作权限的用户来说是只读的,即操作按钮均失效。系统用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.js混入mixin的使用(分权限管理页面)

记一次Vue.js混入mixin的使用(分权限管理页面)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript While 循环基础教程
Apr 05 Javascript
用javascript父窗口控制只弹出一个子窗口
Apr 10 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
js表单中选择框值的获取及表单的序列化
Dec 17 Javascript
Javascript基础_简单比较undefined和null 值
Jun 14 Javascript
vue.js表格组件开发的实例详解
Oct 12 Javascript
jQuery的ready方法实现原理分析
Oct 26 Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
js模拟百度模糊搜索的实例
Aug 04 Javascript
JS开发前端团队展示控制器来为成员引流
Aug 14 Javascript
详解js获取video任意时间的画面截图
Apr 17 #Javascript
解决vue跨域axios异步通信问题
Apr 17 #Javascript
自定义Vue中的v-module双向绑定的实现
Apr 17 #Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 #Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 #Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 #Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 #Javascript
You might like
PHP生成Flash动画的实现代码
2010/03/12 PHP
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
客户端静态页面玩分页
2006/06/26 Javascript
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
与Math.pow 相反的函数使用介绍
2014/08/04 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
Javascript实现字数统计
2015/07/03 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
Python的装饰器模式与面向切面编程详解
2015/06/21 Python
简单了解python关系(比较)运算符
2019/07/08 Python
python 求定积分和不定积分示例
2019/11/20 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
python使用梯度下降算法实现一个多线性回归
2020/03/24 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
什么是GWT的Module
2013/01/20 面试题
Java基础面试题
2012/11/02 面试题
售后主管岗位职责
2013/12/08 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
怎样评估创业计划书是否有可行性?
2019/08/07 职场文书