权限从哪里来？

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

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

我们要拿权限做什么？

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

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

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

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

指令的注册方法如下：

bind 钩子会接收 2 个参数，el 和 bindings，我们对它们进行打印，如下：

在控制台里，我们可以看到，el 指的是指令绑定的元素，bindings 则是指令相关的信息，如下：

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

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

我们的思路是：

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

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

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

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

实现如下：

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

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

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

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

我们通过封装自定义指令实现了控制按钮显示隐藏的效果，那么在其他地方我们需要实现相同效果时，只需要像 v-if 一样，给具体的值就 OK 了。