当前位置:首页 > 编程教程 > vue技术文章 > 详解VUE前端按钮权限控制

VUE前端按钮权限控制的实例分享

  • 发布时间:
  • 作者:码农之家
  • 点击:114

这篇文章主要知识点是关于VUE、前端、权限控制、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js项目开发实战
  • 类型:Vue.js大小:186.6 MB格式:PDF作者:张帆
立即下载

详解VUE前端按钮权限控制

在用户登陆后,根据用户id读取用户的所有权限数据,放入本地的storage进行存储,之后,定义指令,如果用户含有此按钮权限,则在页面显示出来:

/**权限指令**/
  Vue.directive('has', {
   bind: function(el, binding) {
    if (!Vue.prototype.$_has(binding.value)) {
     el.parentNode.removeChild(el);
    }
   }
  });
  //权限检查方法
  Vue.prototype.$_has = function(value) {
   debugger
   let isExist=false;
   let buttonpermsStr=sessionStorage.getItem("buttenpremissions");
   if(buttonpermsStr==undefined || buttonpermsStr==null){
    return false;
   }
   let buttonperms=JSON.parse(buttonpermsStr);
   for(let i=0;i<buttonperms.length;i++){
    if(buttonperms[i].perms.indexOf(value)>-1){
     isExist=true;
     break;
    }
   }
   return isExist;
  };

页面上使用方式:

<el-button type="primary" class="btns first" @click="querylist" v-has="'sys_user_list'">查询</el-button>
     <el-button class="btns" @click="showAddView" v-has="'sys_user_save'">新增</el-button>
     <el-button class="btns" @click="modifyUserItem" v-has="'sys_user_update'">修改</el-button>
     <el-button class="btns" @click="delItem" v-has="'sys_user_delete'">删除</el-button>

以上所述是小编给大家介绍的VUE前端按钮权限控制详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • vue中使用heatmapjs的实例详解
  • vue axios中文文档知识点概述
  • Vue中是如何监听Array的变化
  • vue App.vue中的公共组件改变值触发其他组件或.vue页面监听的实例
  • vue环境搭建的具体步骤
  • vue实现下拉列表功能的你具体代码
  • vue+vue-router转场动画效果的代码实例
  • vue2.0结合Element-ui实例用法
  • vue实现滑动切换效果的实例代码
  • vue通过style或者class改变样式
  • vue状态管理模式vuex知识点总结
  • 相关电子书
    学习笔记

    Copyright 2018-2020 www.xz577.com 码农之家

    版权投诉 / 书籍推广 / 赞助:520161757@qq.com