vue 前端配置按钮权限

拿到产品需要配置的按钮权限清单，如下
在中台 资源管理 配置中，根据页面位置添加，'权限标识’名称不可重复

注意一定要是菜单类型按钮，然后在"权限管理"通过勾选赋予按钮权限
登录后获取后台返回的按钮权限数据，转换得到按钮key数组：btnPermissions（根据后台返回结构自行决定是否需要转换），将btnPermissions存储到session storage

let btnPermissions = ['domain:query','domain:add','domain:edit','domain:cache','domain:del','domain:define','domain:transition']
sessionStorage.setItem('btnPermissions', JSON.stringify(btnPermissions));

新建个js，directive.js

import Vue from 'vue'
const has = Vue.directive('has', {inserted: function (el, binding, vnode) {let btnPermissions = el.getAttribute("value");if (!Vue.prototype.$_has(btnPermissions)) {//这个时候就是没有权限，需要删除掉按钮el.parentNode.removeChild(el);}}
});
// 权限检查方法
Vue.prototype.$_has = function (value) {let isExist = false;let btnPermissionsStr = JSON.parse(sessionStorage.getItem("btnPermissions"));if (btnPermissionsStr == undefined || btnPermissionsStr == null) {return false;}if (btnPermissionsStr.indexOf(value) > -1) {isExist = true;}return isExist;
};export default has;

在main.js中引入js

import has from '@/api/directive.js';

在页面中，按钮上加入 v-has 指令和 value=‘zt:cop-add’ 绑定按钮权限

<el-form-item><el-button type="primary" icon="el-icon-search" v-on:click="getRows" value='domain:query' v-has>查询</el-button>
</el-form-item>

原理解析

v-has是自定义的钩子，会在inserted的时机，去调用directive.js中的方法，去判断自己是否显示，value='domain:query’是其中的判断条件，必须唯一，所以这里强制约定为routes定义的component属性的一个字母小写

注意：不能和v-if共同使用，可以和v-show共同使用

此篇为补充声明，原博客：https://blog.csdn.net/qq_34652478/article/details/100927471

vue 前端配置按钮权限相关推荐

Vue 前端页面按钮权限控制
前言按钮权限控制的功能其实在前面的一篇的页面权限管理也包含有这个功能,但是没有凸显出来,所以现在单独写一篇文章用来记录一下一.什么是按钮权限控制? 刚刚做完了一个后台管理系统,有用到按钮权限控制, ...
权限管理系统项目文档——Vue前端
文章目录第二篇前端实现篇 1. 搭建开发环境 1.1 技术基础 1.2 开发环境 1.3 创建项目 2. 前端项目案例 2.1 安装Element 2.2 页面路由 2.3 安装SCSS 2.4 ...
vue项目权限：数据权限、菜单权限、按钮权限
前言不管是移动端,还是pc端,可能都会有用户登录操作,不同的用户之间又拥有不同的角色,而不同角色之间势必存在不同的权限: 如果按照类型划分,大概可分为三类:菜单权限.按钮权限.数据权限: 数据权限: ...
vue 前端显示图片加token_手摸手，带你用vue撸后台系列二(登录权限篇)
完整项目地址:vue-element-admin https://github.com/PanJiaChen/vue-element-admin 前言拖更有点严重,过了半个月才写了第二篇教程.无奈自 ...
Vue 进阶系列丨自定义指令实现按钮权限功能
Vue 进阶系列教程将在本号持续发布,一起查漏补缺学个痛快!若您有遇到其它相关问题,非常欢迎在评论中留言讨论,达到帮助更多人的目的.若感本文对您有所帮助请点个赞吧! 2013年7月28日,尤雨溪第一次 ...
Vue + Element UI 实现权限管理系统：页面权限控制（菜单 + 按钮）
权限控制方案既然是后台权限管理系统,当然少不了权限控制啦,至于权限控制,前端方面当然就是对页面资源的访问和操作控制啦. 前端资源权限主要又分为两个部分,即导航菜单的查看权限和页面增删改操作按钮的操作 ...
多个 VUE 前端工程部署设置、nginx 代理配置
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. PS:早期我只有一个 VUE 前端工程:gentle-vue ,加一个 java 后端工程:gen ...
vue 一个页面多个router-view如何配置子路由_浅谈vue前端开发架构
通常我们开发出来的网页大都是通过.html文件,渲染与浏览器,也就是UI呈现给用户的. 一个UI page,一般会涉及到资源文件,样式排版,UI交互: 多个UI page,就涉及到UI交互响应: 那么 ...
SkyWaking监控Vue前端接入浏览器配置教程
skywaking监控Vue前端接入浏览器配置步骤第一步引入插件安装愿意等同于anget npm install skywalking-client-js --save 第二步在main.js中 ...

vue 前端配置按钮权限

原理解析

注意：不能和v-if共同使用，可以和v-show共同使用

vue 前端配置按钮权限相关推荐

最新文章

热门文章