权限从哪里来？

首先，我们这里会把权限直接放在 localStorage 中，如下：

可以看到，当前用户拥有创建、编辑 2 个权限。

我们要拿权限做什么？

首先，页面上我们有 3 个按钮，如下：

默认情况下，所有用户都可以看到这 3 个按钮。但是，我们期望的是，根据用户的权限，控制对应按钮的显示和隐藏。这个显示隐藏的逻辑，我们可以用 v-if 去实现，但是考虑到复用性，我们可以定义自定义指令来封装我们的逻辑。

定义自定义指令

    export default {
        bind(){
            console.log('指令绑定到元素上的时候')
        }
    }

首先，一个指令就是一个对象，里面可以包含若干个钩子函数，这里我们可以选择 bind 钩子。

bind 钩子的执行实际是指令绑定到目标元素的时候，比如：

    <button v-has>创建</button>

指令的注册方法如下：

bind 钩子中的参数

bind 钩子会接收 2 个参数，el 和 bindings，el 指的是指令绑定的元素，bindings 则是指令相关的信息

我们可以通过 bindings.value 获取指令的值，例如这里的 hello：

    <button v-has="hello">创建</button>

那么，现在我们就可以给每个按钮定义不同的值，代表每个按钮的权限：

    <button v-has="create">创建</button>
    <button v-has="edit">编辑</button>
    <button v-has="delete">删除</button>

定义指令内部控制显隐的逻辑

我的思路是：

• 首先，获取当前用户的权限 permissions。

• 然后通过 bindings.value，得到当前按钮需要的权限 needPermission。

• 判断 permissions 里是否包含 needPermission，并把结果保存在变量 hasPermission 中。

• 如果用户没有某个按钮的权限，那么我们就隐藏当前按钮。

实现如下：

完全移除没有权限的按钮的 DOM 元素

现在，我们还可以通过手动修改 display 属性，将按钮调出来。

所以，我们需要完全删除按钮的 DOM 元素。

在使用 removeChild 删除的时候，我们必须加上 setTimeout。

因为，在指令的 bind 钩子函数执行的时候，按钮的 DOM 元素其实并没有渲染出来，所以还操作不了 DOM，我们通过 setTimeout 设置一个宏任务，让 setTimeout 里面的代码再按钮的 DOM 元素渲染出来以后再执行，这个时候就可以操作 DOM 了。