directive用户登录权限控制按钮显示与隐藏

后台管理项目中有系统权限控制，根据你登录的角色账号，后台给你返回不一样的权限控制，用按钮显示，然后再做操作。
我们登录成功之后把权限保存在session storage里面，用ktBtn命名来存储。
然后在main.js里面写全局指令。

Vue.directive("has", {
  inserted: function (el, binding) {
    let prems = JSON.parse(sessionStorage.getItem("ktBtn"))
    if (prems.indexOf(binding.value) == -1) {
      el.remove()
    }
  }
})

现在就好了，然后在有权限控制按钮的页面操作，在按钮上添加v-has。

<el-button type="primary" v-has="'/user/trans;/sys/auth/admin/list'">转让客户</el-button>
<el-button type="primary" v-has="'/user/setUserStatus'">冻结账号</el-button>
<el-button type="primary" v-has="'/user/setUserStatus'">解冻账号</el-button>

现在页面上就会显示权限按钮了，当你有这个权限的时候会显示，登录的角色没有这个权限的时候会隐藏，不会的可以直接copy代码尝试一下。