[JavaScript知识库]Vue自定义指令对页面内容鉴权

当我们使用vue写管理项目时候，经常会遇到需要对页面内的DOM节点进行鉴权的操作，常用的做法都是直接使用vuex 进行获取权限列表，今天觉得 太麻烦直接使用Vue 的自定义指令去做。

直接在 main.js 文件中加入如下内容，通过去localstorage中拿到权限列表，这里不去Vuex中获取，因为我们刷新页面时候可能会重置vuex 仓库，丢失了权限，而且这样写就很方便，相当于全局自直接定义了一个方法（指令），直接在DOM挂载的生命周期去插入一些操作

// 自定义指令
Vue.directive('permission', {
	//一个指令定义对象可以提供几个钩子函数: bind 是其中之一
  bind: function (el,binding) { // 这个bind钩子函数的参数也是固定的
    let permission = getStore({ name: 'permission' })  //getStore是获取localstore的自定义方法获
    let flag = permission[binding.expression] //expression是传入的值的字符串格式 ，如下面使用的key
    if(!flag){
      el.style.display= 'none' //当没有这个权限时直接操作el 节点 隐藏掉
    }
  }
})

具体的参数等请查看Vue 官方文档 自定义指令

下面就是在页面中对某个按钮进行操作：

 <button v-permission="key">