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前端按钮权限控制隐藏
 
权限控制描述
如何实现
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>
 

 
 
在很多情况下，程序会根据用户的权限，对按钮的显示和隐藏有一定的限制
 
 
例如：页面上现在有三个按钮（添加，删除，修改），那现在后端返回的是（当前用户只对增加按钮有权限控制）即其余的按钮选项都不显示
 

 情节交代清楚了，接下来我说一下我的思路
 
用户登陆之后就把对按钮的权限控制信息存到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>

实现思路：使用自定义指令
 
 
 
页面权限控制
 
 
根据角色控制页面的显示——用户的角色信息，来自后台返回的用户信息的roles数组。
 
自定义指令 v-hasRole
 
 
使用
 
 
只有拥有admin角色的用户，才能看到的页面
 
 
 
按钮权限控制 
 
 
按钮权限，通过后端返回的路由信息中meta的types数组决定。
 
 
按钮上添加自定义指令 v-hasPermission
 
 
拥有get 和 delete操作权限的用户，才能看到删除按钮
 
自定义指令 v-hasPermission