Vue权限指令如何实现复杂权限控制与权限详解？

本文共计1147个文字，预计阅读时间需要5分钟。

目录+第一类-自定义权限指令+第二类:v-if自定义控制+最后说明+在日常的开发过程中，我们除了使用Vue已有的指令之外，还需要自定义指令，以便对DOM节点进行一步操作。在后台系统中，最后需要自定义指令。

目录

• 第一种-自定义权限指令
• 第二种：v-if自定义控制
• 最后说明

在日常的开发过程中，我们除了使用Vue已有的指令之外，还需自定义指令，需要对DOM节点进一步操作。

在后台系统中，最常用的就是权限指令。

权限控制的原理就是在系统当前界面初始化时，判断某些DOM节点有没有权限，没有则移除此DOM。

在Vue中使用指令权限时，通常有两种控制节点的方法。第一个是对普通节点的指令控制（普通节点即是指 html 中的标签节点。），第二个则是对elementUI组件的控制。

为什么分两种呢？是因为在实际开发过程中，我发现自定义指令有时候无法移除element中的组件，例如：在使用el-tab时，下面包含了多个tab页，当某个tab页无权限访问时 想要对其进行移除，这时候自定义的指令只能移除此tab页内的内容，并不能够将此tab页一起移除。所以这时候会使用v-if进行控制。