精华内容
下载资源
问答
  • vue按钮根据权限控制显示隐藏

    千次阅读 2020-09-07 09:33:39
    1.在main.js中添加以下代码 加在new vue之前 // 权限指令 Vue.directive('has', { bind: function (el, binding) { if (!Vue.prototype.$_has(binding.value)) { el.style.display = 'none' } } }) // 权限检查方法 ...

    1.在main.js中添加以下代码

    加在new vue之前

    // 权限指令
    Vue.directive('has', {
      bind: function (el, binding) {
        if (!Vue.prototype.$_has(binding.value)) {
          el.style.display = 'none'
        }
      }
    })
    // 权限检查方法
    Vue.prototype.$_has = function (value) {
      let isExist = false
      //  获取拥有的权限
      let role= store.state.d2admin.user.info.role
      if (role=== value) {
        isExist = true
      }
      return isExist
    }
    

    2.在需要控制的按钮上加v-has:

    <el-button v-has="parameter" style="float: right" @click="dialogForm(false)">新增</el-button>
    

    parameter处是自己项目的权限标识

    展开全文
  • vue前端按钮权限控制隐藏

    万次阅读 多人点赞 2019-04-10 19:41:23
    vue前端按钮权限控制隐藏权限控制描述如何实现1、储存权限数据2、权限判断方法3、设置vue自定义指令4、最终代码与效果 很多后台管理系统会用到权限管理,菜单权限比较好控制,按钮权限就复杂一些,本文介绍的就是...


    很多后台管理系统会用到权限管理,菜单权限比较好控制,按钮权限就复杂一些,本文介绍的就是按钮权限如何控制,用的是vue项目。

    权限控制描述

    前端需要根据后端传来的权限数据控制是否显示新增、编辑、删除(红框所示部分)功能。
    在这里插入图片描述
    菜单管理处设置的新增、删除、编辑权限参数如图红框所示部分
    在这里插入图片描述

    如何实现

    1、储存权限数据

    首先将权限控制的数据储存到vuex或者sessionstorage中,或者全局变量。
    如何获得权限数据并提交到vuex的博文
    https://blog.csdn.net/weixin_44849078/article/details/89184039

    2、权限判断方法

    以新增按钮为例,因为设置的新增菜单权限参数为"line-add",所以html标签如下,v-has为vue自定义指令,line-add为储存在后台的权限参数

    <el-button type="primary" v-has="'line_add'">新增</el-button>
    

    store.getters.getMenuBtnList为储存在vuex中的菜单按钮数据,遍历对比permission字段是否与标签中的自定义参数line_add相等,匹配成功则表明有权限,失败没有权限,返回false。

        function permissionJudge(value) {
          let list = store.getters.getMenuBtnList;
          for (let item of list) {
            if (item.permission === value) {
              return true;
            }
          }
          return false;
        }
    

    3、设置vue自定义指令

    注册一个全局自定义指令并监控它

    // 注册一个全局自定义指令 `v-has`
    Vue.directive('has', {
      // 当被绑定的元素插入到 DOM 中时触发bind钩子
      bind: function (el, binding) {
        if (permissionJudge(binding.value)) {
          el.parentNode.removeChild(el);
        }
      }
    });
    

    结果发现报错了,调试后发现el.parentNode为null,所以removeChild方法报错,我猜可能是因为bind钩子触发时父元素还没有生成,所以换成inserted钩子。
    inseted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。

    4、最终代码与效果

    使用inserted后成功实现没有权限的按钮隐藏效果,代码如下

    Vue.directive('has', {
      inserted: function (el, binding) {
        if (!permissionJudge(binding.value)) {
          el.parentNode.removeChild(el);
        }
    
        function permissionJudge(value) {
          // 此处store.getters.getMenuBtnList代表vuex中储存的按钮菜单数据
          let list = store.getters.getMenuBtnList;
          for (let item of list) {
            if (item.permission === value) {
              return true;
            }
          }
          return false;
        }
      }
    });
    
    <el-button type="primary" v-has="'line_add'">新增</el-button>
    

    在这里插入图片描述

    展开全文
  • vue 按钮权限管理

    千次阅读 热门讨论 2021-05-31 16:05:34
    在很多情况下,程序会根据用户的权限,对按钮显示隐藏有一定的限制 例如:页面上现在三个按钮(添加,删除,修改),那现在后端返回的是(当前用户只对增加按钮有权限控制)即其余的按钮选项都不显示 情节...

    在很多情况下,程序会根据用户的权限,对按钮的显示和隐藏有一定的限制

    例如:页面上现在有三个按钮(添加,删除,修改),那现在后端返回的是(当前用户只对增加按钮有权限控制)即其余的按钮选项都不显示

    在这里插入图片描述
    情节交代清楚了,接下来我说一下我的思路

    • 用户登陆之后就把对按钮的权限控制信息存到vuex中
    • 写一个vue的自定义指令,根据指令中传入的信息(操作Dom的显示和隐藏)
    • 在组件中注册这个自定义指令,并应用
    vuex中的代码
    
    import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex)
    const store=new Vuex.Store({
        state:{
            buttonPermission:{
                add:true,
                edit:false,
                delete:false
            }
        }
    })
    export default store
    
    
    自定义指令中的代码
    
    export const directives={
        has:{
            inserted:function(el,bindings,vnode){
                let btnValue=bindings.value;
                let boolean=vnode.context.$store.state.buttonPermission[btnValue]
                !boolean && el.parentNode.removeChild(el)
            }
        }
    }
    
    组件中的代码
    
    <template>
      <div id="app">
        <h2>button-权限管理</h2>
        <button v-has="'add'">增加</button>
        <button v-has="'delete'">删除</button>
        <button v-has="'edit'">修改</button>
      </div>
    </template>
    
    <script>
    import {directives} from './directives/has'
    export default {
      name: 'App',
      directives
    }
    </script>
    
    展开全文
  • 按钮权限,通过后端返回的路由信息中meta的types数组决定。 按钮上添加自定义指令 v-hasPermission 拥有get 和 delete操作权限的用户,才能看到删除按钮 自定义指令 v-hasPermission ...

    实现思路:使用自定义指令

    页面权限控制

    根据角色控制页面的显示——用户的角色信息,来自后台返回的用户信息的roles数组。

    自定义指令 v-hasRole

    使用

    只有拥有admin角色的用户,才能看到的页面

    按钮权限控制 

    按钮权限,通过后端返回的路由信息中meta的types数组决定。

    按钮上添加自定义指令 v-hasPermission

    拥有get 和 delete操作权限的用户,才能看到删除按钮

    自定义指令 v-hasPermission

     

     

    展开全文
  • vue项目权限按钮

    2021-06-06 17:32:05
    处理按钮权限的一个思路是使用vue的自定义指令,这里记录一个简单的使用方法: import Vue from 'vue' import store from '@/store' /** * 按钮权限指令 */ const authBtn = Vue.directive('authBtn', { ...
  • Vue按钮权限

    千次阅读 2018-12-25 09:30:44
    最近做项目,客户要求做用户-角色-按钮权限,我是用自定义指令来实现的,代码如下: import Vue from 'vue' /**权限指令**/ Vue.directive('has', { bind: function (el, binding) { debugger if (!Vue....
  • Vue 项目 菜单权限按钮权限控制

    千次阅读 2020-06-24 12:05:50
    1.页面展示需要鉴权的所有按钮,需要先鉴权菜单权限显示隐藏。 2.勾选每个角色或者用户所能看的权限保存在数据库。该权限数据是一个权限字段的数组。 3.全局自定义指令(directive)控制按钮权限数据的方法,...
  • vue 获取按钮权限

    2019-12-06 14:51:08
    import Vue from 'vue'; import store from '@/store'; // 权限检查方法 let hasPermission = Vue.prototype.$has = function(value) { if (value in store.getters.roles) { return true; } return false; };.....
  • 主要介绍了VUE前端按钮权限控制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要介绍了Vue按钮权限方案,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue+shiro实现前端细颗粒按钮权限,并且可以实现删除和禁用两种不同模式,里面需要的前置技术包括 :vue\vue的自定义指令\vue的自定义插件\vuex
  • 后台管理员可以新增前台成员,不通的成员具有不同的权限有权限的人员可以看到一些操作按钮或者数据列表,反之则看不到。 那么也就是说,前端需要根据登录用户的权限来渲染指定的dom。 1、components文件下新建...
  • 然后判断这个按钮的标识eleType在角色信息里面没有 返回一个boolean值 v-if条件渲染 1、给按钮加标识符,如果按钮的标识符设置的一样的(比如新增都设置为add啥的)可以加上按钮的路由信息保证按钮标识符是唯一的...
  • vue控制按钮权限

    2020-09-09 12:08:20
    vue控制按钮权限
  • vue按钮权限控制

    2020-12-09 22:02:18
    src/common/array.js 可以根据需要修改 export function checkArray(key){ // let arr = ['1','2','5','9'] let ... Like v-display-key='' `) } } }) 页面 按钮按钮按钮按钮四 效果:只显示按钮一、按钮
  • 我们控制用户的权限一般都在后台进行处理,一般的操作是当你点击某一个按钮的时候,如果你没有对应权限,会提示403,但是呢,为了更加的用户友好体验,我们会让他在没有对应权限的情况下直接不显示相应按钮。...
  • 宣传官网 http://xb.exrick.cn 在线Demo http://xboot.exrick.cn 开源版Github地址 https://github.com/Exrick/x-boot 开发文档 https://www.kancloud.cn/exrick/xboot/1009234 ... 按钮权限 将用...
  • vue按钮权限控制

    2019-11-25 16:40:31
    vue按钮权限控制 学习记录 1.创建 .js文件 import Vue from 'vue' // 按钮级别权限 -- 比对元素 元素绑定角色值<<-->>登录获取值 // 元素绑定角色值 →_→ 接收 字符串 或 数组 // 登录获取值 →_→ ...
  • Vue按钮权限控制实践

    2020-12-29 11:54:23
    上篇是Vue菜单权限的控制,这篇讲一下按钮权限的控制,主要运用了directive自定义指令来实现
  • // 是否有权限 const hasPermission = btnRoleList => { // 当前用户的权限列表 let role = localStorage.getItem("role"); return btnRoleList.some(e => role.includes(e)); }; // 指令 const has =V
  • vue 自定义指令 实现 按钮权限

    千次阅读 2019-04-04 16:39:20
    1.登录成功后,获取后台返回所有的按钮权限id,存到sessionStorage中 2.在main.js中自定义指令 const has = Vue.directive('has', { inserted: function (el, binding) { // 获取按钮权限 if (!Vue.prototype.$...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,851
精华内容 3,140
关键字:

vue有权限vue按钮显示隐藏

vue 订阅