Vue自定义指令实现按钮权限控制

实现按钮权限控制可以把方法挂载到VUE原型上之后通过v-if来判断,也可以自定义指令来实现控制.
接下来主要说一下如何用自定义指令来实现按钮控制.

<div v-permission="pc:saas:confirm">
    权限操作
</div>

一. 新建userPermission.js文件

import Vue from 'vue';
Vue.prototype.$userPermission = function(str) {
    if (localStorage.getItem("setPermissions").indexOf(str) > 0) {//获取用户的所有操作权限
      return true;
    } else {
      return false;
    }
  };
const permission= Vue.directive('permission', {
    inserted: function (el, binding) { //此处用inserted确保下面可以拿到父节点
    // 获取页面按钮权限
    let value  = binding.value.str
    if (!Vue.prototype.$userPermission(value)) {
        console.log(el.parentNode,'000');
        el.parentNode.removeChild(el);
        // el.style.display = 'none'
    }
}
});
export  {permission}

此处tips:

1. 一开始用了bind 打印出来的el.parentNode为null,无法销毁当前元素,看了一下文档改为inserted即可.

2. 实现v-if的效果: el.parentNode.removeChild(el)
实现v-show的效果:el.style.display = ‘none’

二. 再main.js中引入

import  '@/common/userPermission.js';

三. 在组件中直接使用

```js
<div v-permission="pc:saas:confirm"{ str: 'pc:saas:project' }"">
    权限操作
</div>

此处tips:

<div v-permission="dfasdjf">
    权限操作
</div>

直接绑定字符串的形式会报"dfasdjf is not defined"的错误,所以通过绑定对象传参的方式传值.

---

最后补充:
一开始以为template中不能直接使用挂载在原型上的方法,每次引入都要在methods中写同名方法返回vue原型上的方法,再在template上调用,但其实直接使用即可,这样似乎更为方便一些.
直接在main.js 加上以下代码

Vue.prototype.$userPermission = function(str) {
    if (localStorage.getItem("setPermissions").indexOf(str) > 0) {//获取用户的所有操作权限
      return true;
    } else {
      return false;
    }
  };

在组件中引入

<div v-if="$userPermission('jdfasd')">
    权限操作
</div>

挂载原型的时候用了$符号,template中也不能漏掉.