main.js

// 权限
/** 权限指令,对按钮权限的控制 **/
Vue.directive('allow', {
bind: function(el, binding) {
// 通过当前按钮,获取所在权限组的组名
let permissGropName = binding.value.split("_")[0];
// 通过登录成功后获取所有权限列表,如下permissGroup类型,存到vuex,其中所有名字必须均独一无二
let permissGroup = {
"proj":["proj_edit","proj_del"],
"menu":["menu_look","menu_edit"], // 等
}
// 按组名获取权限列表,
if( permissGroup[permissGropName].indexOf(binding.value) == -1){
el.style.display = "none"
}
}
}) // 以下可根据实际情况使用 // 权限检查方法(且把该方法添加到vue原型中)
// Vue.prototype.$_has = function(value) {
// let isExist = false
// // 从浏览器缓存中获取权限数组(该数组在登入成功后拉取用户的权限信息时保存在浏览器的缓存中)
// var buttonpermsStr = sessionStorage.getItem('powerHandle')
// if (buttonpermsStr === undefined || buttonpermsStr == null) {
// return false
// }
// if (buttonpermsStr.indexOf(value) >= 0) {
// // 若在按钮中定义的权限字段能在后端返回的权限数组中能找到,则该按钮可显示
// isExist = true
// }
// return isExist
// }

具体页面

<!-- 具体页面中的按钮 -->
<div>
<button v-allow="'proj_edit'">项目编辑</button>
<!-- 改为proj_del,即可查看权限操作demo -->
<button v-allow="'proj_del1'">项目删除</button>
</div>
												

vue基于页面中按钮权限控制的更多相关文章

  1. Vue 动态控制页面中按钮是否显示和样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Struts2中基于Annotation的细粒度权限控制

    Struts2中基于Annotation的细粒度权限控制 2009-10-19 14:25:53|  分类: Struts2 |  标签: |字号大中小 订阅     权限控制是保护系统安全运行很重要 ...

  3. Spring Cloud实战 | 第十一篇:Spring Cloud Gateway 网关实现对RESTful接口权限控制和按钮权限控制

    一. 前言 hi,大家好,这应该是农历年前的关于开源项目 的最后一篇文章了. 有来商城 是基于 Spring Cloud OAuth2 + Spring Cloud Gateway + JWT实现的统 ...

  4. Shiro入门之二 --------基于注解方式的权限控制与Ehcache缓存

    一  基于注解方式的权限控制 首先, 在spring配置文件applicationContext.xml中配置自动代理和切面 <!-- 8配置自动代理 -->    <bean cl ...

  5. shiro配合html页面完成细粒化权限控制

    shiro配合html页面完成细粒化权限控制 原创 2016年10月04日 12:02:34 标签: shiro / 框架 / 界面 / 权限 8924 shiro是现在非常普遍使用的java权限框架 ...

  6. mvc 按钮权限控制

    需要开发一个按钮权限的控制,思路:拦截所有按钮路径,和用户拥有的3级按钮权限对比, 所有验证都一个方法解决,只需要修改js后的参数,参数就是按钮对应的权限码 如果有什么问题请提醒,谢谢! xml: & ...

  7. <实训|第九天>掌握linux中普通的权限控制和三种特殊的权限(sst),做合格的运维工程师

    linux中,权限的学习是必不可少的,不论是作为一名运维工程师或者是单一的管理者,学习好linux中的权限控制,你就可以保护好自己的隐私同时规划好你所管理的一切. 权限的学习是很多的,不要认为自己已经 ...

  8. C++ 中的权限控制

    权限控制,指的是用户只能访问符合自己权限的资源,系统对用户进行权限控制以防止用户的误操作/恶意操作等. 在C++代码中,权限控制指的是程序员在接口声明/类声明/函数声明等中进行的授权控制.如下面的代码 ...

  9. 如何优雅的在 vue 中添加权限控制

    前言 在一个项目中,一些功能会涉及到重要的数据管理,为了确保数据的安全,我们会在项目中加入权限来限制每个用户的操作.作为前端,我们要做的是配合后端给到的权限数据,做页面上的各种各样的限制. 需求 因为 ...

随机推荐

  1. Linux基础(01)开发环境的搭建

    内核源码下载 : https://blog.csdn.net/u011375704/article/details/81866427 1.在虚拟机安装Ubuntu 14.04版本 (安装时设置好用户名 ...

  2. 简洁的 Python Schema

    目录 Python Schema使用说明 1. Schema是什么? 2. 安装 1. 给Schema类传入类型(int.str.float等) 2. 给Schema类传入可调用的对象(函数.带__c ...

  3. 彻底搞懂etcd raft选举、数据同步

    etcd raft选举机制 etcd 是一个分布式的k/V存储系统.核心使用了RAFT分布式一致性协议.一致性这个概念,它是指多个服务器在状态达成一致,但是在一个分布式系统中,因为各种意外可能,有的服 ...

  4. opencv简单卷积运用

    import cv2 as cv import numpy as np img=cv.imread('learn.jpg',cv.IMREAD_GRAYSCALE) cv.imshow('first ...

  5. Django---Django的ORM的一对多操作(外键操作),ORM的多对多操作(关系管理对象),ORM的分组聚合,ORM的F字段查询和Q字段条件查询,Django的事务操作,额外(Django的终端打印SQL语句,脚本调试)

    Django---Django的ORM的一对多操作(外键操作),ORM的多对多操作(关系管理对象),ORM的分组聚合,ORM的F字段查询和Q字段条件查询,Django的事务操作,额外(Django的终 ...

  6. IntelliJ IDEA live template 方法配置

    ** * <p></p> * 功能描述 * $params$ * @return $return$ * @author abc * @date $time$ $date$ * ...

  7. IT之快速提高效率的方法与思考

    前言 文章也没什么很高深的问题,大概花个5分钟能看完.是一些大家都知道的道理,作为提醒与总结. 关于提高方面的内容,一般都有个人的方法,但大致都一致.可分为几个步骤. 框架.工具使用相关 使用框架.工 ...

  8. WebStorm eslint插件报错解决 - TypeError: this.CliEngine is not a constructor

    将eslint更新版本后,出现TypeError: this.CliEngine is not a constructor的错误. 解决办法: 1.编辑 X:\WebStorm\plugins\Jav ...

  9. JavaScript 之 定时器

    JavaScript 里面有两个定时器:setTimeout() 和 setInterval() . 区别: setTimeout():相当于一个定时炸弹,隔一段时间执行,并且只会执行一次就不在执行了 ...

  10. linux清理系统缓存

    Linux 内存优化. 1.清理前内存使用情况 free -m 2.开始清理 echo 1 > /proc/sys/vm/drop_caches 3.清理后内存使用情况 free -m 4.完成 ...