vue 自定义指令控制权限按钮显示与隐藏

     经常做中后台管理系统的同学都知道系统权限控制的功能，当用户点击登陆按钮登陆成功后，服务器会返回token，前端拿到token会向后台接口获取用户权限相关信息，拿到数据后存储到Vuex或者localStorage中，如果权限控制的按钮较少时也可以用v-if进行判断显示与隐藏，但是如果页面过多，权限控制的数据过多，每个页面都要进行逻辑判断，感觉有点麻烦，相比之下，自定义指令显得更加方便。

1. 创建自定义指令：

 // btnPernission.js 页面

 1 import Vue from 'vue'
import { getStore } from './utils/storage'

Vue.directive('has', {
  // inserted：被绑定元素插入父节点时调用
  inserted: function(el, binding, vnode) {
    if (!permissionJudge(binding.value)) {
      el.parentNode.removeChild(el)
    }

    function permissionJudge(value) {
      const list = JSON.parse(getStore('btnList'))  // 权限按钮的List
      for (const item of list) {
        if (item.path === value) {
          return true
        }
      }
      return false
    }
  }
})

注意：这里使用自定义指令钩子函数bind，使用el.parentNode.removeChild是无法删除节点的（只调用一次，指令第一次绑定到元素时调用），节点还没生成，而inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)，所以应该使用inserted

 

2. 在main.js中引入：

  import './btnPernission'    // 按钮权限控制     

 

3. 使用方法：

  <el-button v-has="'/btn/view'" @click="handleClickPreview(scope.row)" type="text">查看</el-button>    

 

 一般是通过操作权限是通过按钮的，菜单权限是通过前端路由和后台路由来判断的。

 

关于自定义指令的钩子函数：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下）

• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。

 更多内容可查阅官方文档：链接