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文件目录指令

    1.pwd指令 pwd 显示当前所在的目录 2.ls指令 ls [选项] [目录或文件] 查看文件信息 ls -a 查看所有文件和目录,包括隐藏的 ls -l 以列表的方式显示 3.cd指令 cd 路 ...

  2. .NET下使用HTTP请求的正确姿势

    来源:Lewis.Zou cnblogs.com/modestmt/p/7724821.html 一.前言 去年9月份的时候我看到过外国朋友关于.NET Framework下HttpClient缺陷的 ...

  3. 『线段树及扫描线算法 Atlantis』

    入门看这边『线段树 Segment Tree』. 扫描线 扫描线是一种解决一类平面内统计问题的算法,通常会借助线段树来实现,我们通过一道例题来引入这个算法. Atlantis Description ...

  4. 二十三、并发编程之深入解析Condition源码

    二十三.并发编程之深入解析Condition源码   一.Condition简介 1.Object的wait和notify/notifyAll方法与Condition区别 任何一个java对象都继承于 ...

  5. php 逻辑题

    越长大约发现,高中学的数学,都还给了数学老师,一点都没有留住. 最近遇到了一个 逻辑题,然后想了半天,后来做出来了,我就发现了,我可能是一个假的理科生.很简单的样子. 废话不说,看看这道题吧. /** ...

  6. 一张图看懂SharpSocket

    SharpSocket提供了很多接口和类,他们被良好地组织在一起,通过下面的图片,可以瞬间看懂整个类库的脉络.通过调用各个接口的方法,完成socket通信的功能.

  7. 服务发现对比:Zookeeper vs etcd vs Consul

    我们拥有的服务越多,如果我们使用预定义的端口,就会发生冲突的可能性越大.毕竟,在同一端口上不能监听两个服务.管理一百个服务所使用的所有端口的紧密列表本身就是一项挑战.将那些服务所需的数据库添加到该列表 ...

  8. 【转】 python_控制台输出带颜色的文字方法

    在python开发的过程中,经常会遇到需要打印各种信息.海量的信息堆砌在控制台中,就会导致信息都混在一起,降低了重要信息的可读性.这时候,如果能给重要的信息加上字体颜色,那么就会更加方便用户阅读了. ...

  9. final,finally,finalize之间的区别。

    fianl:可以修饰类.变量.方法.修饰类不能被继承,修饰变量只能赋值一次,修饰方法不能被重写. finally是try语句体中的一个语句体,不能单独使用,用来释放资源. finalize()是在ja ...

  10. Spring Boot 企业级应用开发实战 刘伟东-2018年3月第一版

    Spring会自动搜索某些路径下的Java类 并将这些类注册微Bean实例,这样就省去了所有Bean都配置在XML的麻烦 Spring会适当地将显示指定路径下的的类全部注册微Spring Bean . ...