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

  • 更新时间:2020-08-03 16:31:25
  • 编辑:隗姝丽
给网友们整理相关的编程文章,网友耿晓楠根据主题投稿了本篇教程内容,涉及到VUE、前端、权限控制、详解VUE前端按钮权限控制相关内容,已被674网友关注,涉猎到的知识点内容可以在下方电子书获得。
  • Vue.js项目实战 / 141 MB 推荐度:
  • 现代前端技术解析 / 44.8 MB 推荐度:
  • CSS世界 / 42.6 MB 推荐度:
  • 《Node.js+Express+Vue.js项目开发实战》源码 / 3.6 MB 推荐度:
  • 瞬间之美:Web界面设计如何让用户心动 / 54.52MB 推荐度:
  • 详解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前端按钮权限控制详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

    相关教程

    • vue中使用heatmapjs的实例详解

      这篇文章主要介绍了vue中使用heatmapjs的示例代码(结合百度地图),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

      发布时间:2020-07-16

    • vue axios中文文档知识点概述

      本篇文章主要介绍了详解axios中文文档,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

      发布时间:2019-11-12

    • Vue中是如何监听Array的变化

      这篇文章主要介绍了详解Vue 如何监听Array的变化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

      发布时间:2020-02-29

    • vue App.vue中的公共组件改变值触发其他组件或.vue页面监听的实例

      这篇文章主要介绍了vue App.vue里的公共组件改变值触发其他组件或.vue页面监听,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

      发布时间:2019-11-01

    • vue环境搭建的具体步骤

      这篇文章主要介绍了vue环境搭建简单教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

      发布时间:2020-07-10

    • vue实现下拉列表功能的你具体代码

      这篇文章主要介绍了vue下拉列表功能实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下

      发布时间:2019-11-23

    • vue+vue-router转场动画效果的代码实例

      今天小编就为大家分享一篇vue+vue-router转场动画的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

      发布时间:2020-02-16

    • vue2.0结合Element-ui实例用法

      这篇文章主要介绍了vue2.0结合Element-ui实战案例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

      发布时间:2020-02-02

    • vue实现滑动切换效果的实例代码

      这篇文章主要为大家详细介绍了vue实现滑动切换效果,仅在手机模式下可用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

      发布时间:2020-02-01

    • vue通过style或者class改变样式

      这篇文章主要介绍了vue通过style或者class改变样式的实例代码,在文中给大家提到了vue的一些样式(class/style)绑定,需要的朋友可以参考下

      发布时间:2020-01-20

    • vue状态管理模式vuex知识点总结

      本篇文章主要介绍了深入理解vue的状态管理模式vuex,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

      发布时间:2019-10-19

    用户留言