vue 按钮权限 鉴权

在实际项目开发中，登陆的账号会有多种角色，例如操作员新增，审核员审批。每个角色的按钮权限都不相同，我们在开发中应该做好这一块的权限处理

---

1.登陆获取按钮权限的数组

首先用户登录时，我们可以用过API接口获取所有菜单和按钮的权限,我们可以把所有按钮信息，保存在sessionStorage中。

const AuthorityData = {
    menus : ['home', 'dashboard'],
    buttons: ['share', 'edit'],
}
// 将按钮权限信息保存起来，防止刷新页面时丢失
sessionStorage.setItem( "permission_button", JSON.stringify(AuthorityData.buttons));

2.v-if的简单实现

拿vue项目举个栗子，我们可以通过v-if来实现权限的控制，还是比较简单有效的

<el-button v-if="permission_button.includes('edit')">修改</el-button>

<script>
  export default {
      data() {
          return  {
              permission_button: JSON.parse(sessionStorage.getItem("permission_button"))
            }
      }
  }
</script>

3.全局的自定义指令

上面就实现了一个简单的前端按钮权限控制，但是有一丢丢不优雅，每次都要多定义一个变量。怎么解决呢？
我们可以定义一个全局的自定义指令，这样代码就大大的减少了，偷懒才是最舒服的。还是拿vue举例毕竟我只会这个。

import Vue from 'vue';
Vue.directive('btnlimit', {
    // 当被绑定的元素插入到 DOM 中时……
    inserted: (el, binding) => {
        // el 当前绑定的元素 binding.value指令的绑定值
        let permissionList = sessionStorage.getItem('permission_button');
        // 判断一下是否包含这个元素，如果不包含的话，那就让他爸爸元素把子元素扔进垃圾堆
        if (!permissionList.includes(binding.value)) {
            el.parentNode.removeChild(el)
        }
    }
})
// 大家可以把自己定义的指令写在一个directive.js文件中，在main.js总入口引入下就可以了，简单而不失优雅

我们不妨复习下其他几个钩子函数（都是复制vue官方文档，我也不懂啥意思，哈哈）

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

4.vue组件的使用自定义指令

好了，定义过了全局自定义指令了，我们就可以在所有的vue组件中肆无忌惮的运用它了，不需要单独引用了，是不是又省去了CTRL+C CTRL+V的时间？只可惜双引号套着单引号有点不爽，可惜我也不会优化了。

<el-button v-btnlimit="'edit'">修改</el-button>