记一次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 相关文章推荐
js自定义事件代码说明
Jan 31 Javascript
JS判断页面是否出现滚动条的方法
Jul 17 Javascript
javascript数据结构中栈的应用之符号平衡问题
Apr 11 Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
node.js命令行教程图文详解
May 27 Javascript
vue webpack重写cookie路径的方法
Jul 10 Javascript
浅谈JS中几种轻松处理'this'指向方式
Sep 16 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 06 Javascript
从原生JavaScript到React深入理解
Jul 23 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加密解密类代码
2011/11/27 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
PHP实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
jQuery 中关于CSS操作部分使用说明
2007/06/10 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
FF IE浏览器修改标签透明度的方法
2014/01/27 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
面试常见的js算法题
2017/03/23 Javascript
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python连接MySQL数据库实例分析
2015/05/12 Python
python中的代码编码格式转换问题
2015/06/10 Python
python利用thrift服务读取hbase数据的方法
2018/12/27 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
大专学生推荐信范文
2013/11/19 职场文书
中国好声音华少广告词
2014/03/17 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python