记一次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 深拷贝函数
Dec 04 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
Oct 25 Javascript
javascript跑马灯悬停放大效果实现代码
Dec 12 Javascript
使用js检测浏览器的实现代码
May 14 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
Javascript动画效果(4)
Oct 11 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
React中的render何时执行过程
Apr 13 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
图书管理程序(一)
2006/10/09 PHP
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
php目录拷贝实现方法
2015/07/10 PHP
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
jquery实现多条件筛选特效代码分享
2015/08/28 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
js实现简单的打印表格
2020/01/15 Javascript
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python实现挑选出来100以内的质数
2015/03/24 Python
总结Python编程中三条常用的技巧
2015/05/11 Python
python使用turtle库绘制树
2018/06/25 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
Django框架请求生命周期实现原理
2020/11/13 Python
HTML5 新事件 小结
2009/07/16 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
struct与class的区别
2014/02/03 面试题
Java面向对象面试题
2016/12/26 面试题
班长岗位职责
2013/11/10 职场文书
基层党建工作宣传标语
2014/06/24 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
JS Object构造函数之Object.freeze
2021/04/28 Javascript
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python