当我们使用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">