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. JDK9版本以上Java独有的一个轻量级小工具,你知道吗?jshell

    jshell,是JavaJDK9这个大版本更新以来,带来的一个轻量级小工具.我们再也不用进入Java目录,编写一个Java文件,然后再去编译,最后才能执行它. 这里,你可以直接写一个小功能,就能去实现 ...

  2. linux中常用命令alias

    1.查看系统中所有的命令别名 alias 2.查看指定的别名 alias 别名 2.设定别名 alias 别名='原命令' 3.删除别名 unalias 别名 4.使别名永久生效 vi ~/.bash ...

  3. 【Linux】CentOS7 打开关闭防火墙及端口

    一.centos7版本对防火墙进行加强,不再使用原来的iptables,启用firewalld1.firewalld的基本使用启动: systemctl start firewalld查状态:syst ...

  4. Java 8 ArrayList 详解

    GitHub Page: http://blog.cloudli.top/posts/Java-ArrayList/ ArrayList 继承于 AbstractList ,实现了 List.Rand ...

  5. Java之利用Freemarker模板引擎实现代码生成器,提高效率

    https://blog.csdn.net/huangwenyi1010/article/details/71249258  java模板引擎freemarker代码生成器 更多 个人分类: 一步一步 ...

  6. C#读写设置修改调整UVC摄像头画面-焦点

    有时,我们需要在C#代码中对摄像头的焦点进行读和写,并立即生效.如何实现呢? 建立基于SharpCamera的项目 首先,请根据之前的一篇博文 点击这里 中的说明,建立基于SharpCamera的摄像 ...

  7. C:\Program不是内部或外部命令,也不是可运行的程序或批处理文件。

    问题描述:C:\Program不是内部或外部命令,也不是可运行的程序或批处理文件. 解决办法:C:\"Program Files"\具体文件目录. 具体场景:在cmd或者批处理文件 ...

  8. C#安装和卸载windowsService的bat指令

    只需新建2个文本文档,将2个指令分别复制进去,再将txt格式改为bat格式,以管理员身份运行 安装指令 %SystemRoot%\Microsoft.NET\Framework\v4.0.30319\ ...

  9. Java自学-数字与字符串 比较字符串

    Java 比较字符串 示例 1 : 是否是同一个对象 str1和str2的内容一定是一样的! 但是,并不是同一个字符串对象 package character; public class TestSt ...

  10. PyTorch 安装 报错,原因是pip 不是64位的。

    原因: import pip._internal print(pip._internal.pep425tags.get_supported()) 换位64位的python版本. import pip. ...