我一直对权限设计感兴趣。 我以前写后端代码时，做过权限设计。 虽然很有趣，但我知道前端按钮级别的权限设计，但还没有具体实现过。 最近项目打算细分权限，研究一下前端的权限吧。
权限设计的出发点是让不同权限的用户看到的内容、可以实现的操作不同。
从具体的设计来说，可以分为路由级权限和按钮级权限，从实现的难度来说，非常简单。 这个博客主要讨论按钮级别的权限控制。
按钮级别的权限需要做什么？ 要管理权限，首先要知道实现的目的是什么。
按钮级别的权限控制比较简单，不同身份的按钮、可以操作的功能不同。
首先要进行身份的区分和验证，可以根据服务端发布的用户权限类别，提取公开方法。
//utils/auth.js文件的位置//当前客户权限exportfunctiongetcurrentauthority ()…return['admin'] )//验证权限exportfunctionchection return current.some (item=item.includes (item ) ) /登录验证export function isLogin ) { const curent=='guest '； }两种实现方式在脱离公开方法进行身份提取和验证后，可以在不同的组件中使用。 最粗暴的方法是直接使用v-if判断疯狂。
但是，这种方法并不优雅，而且会对原本使用v-if的内容造成困扰，因此可以使用权限判断进行封装。 主要有两种方法。 一个是组件，另一个是命令。
1 .组件方式v-if不太优雅，可以封装v-if的功能吗？ 答案当然是可能的。 只需将更高的组件嵌套在需要权限控制的内容之外，并确定外部组件是否渲染内部组件，就可以实现所需的v-if能力。
让我们考虑一下这个权限组件。
首先，权限组件不需要特定的dom渲染。 您只需根据条件确定是否渲染嵌套的特定业务组件。 这样，就可以没有模板模板的内容，只需要具体的逻辑。 这样，仅通过纯函数组件就能够通过参照封装的权限检查方法来判断props的许可权限。
组件实现：
脚本导入{ check } from ' ./utils/auth.js '； 导出默认值{ name :’authorized’，functional:true，props : { authority : } type : array，required 3360 trrred scopedSlots.default () : null } )，}/script 思路：
传递props允许的权限，render函数在上下文中检索props和slot插槽的内容，在check方法中检查props传递的权限是否通过，根据结果呈现slot的内容，以及权限限制
组件使用：
模板授权：授权=' [ ' admin ' ] ' other-components/other-components/authorized/template注：授权
2 .命令方式使用组件方式进行权限控制，基本满足了我们实现按钮级权限控制的需求。 只需在需要控制权限的按钮之外添加组件。
但是，每次都需要将组件嵌套在外面，还是很麻烦，所以可以参考以下v-if进行自定义指令控制。
//directives/auth.js导入{ check } from ' ./utils/auth.js '； functioninstall(vue，options={} ) vue.directive ) options.name|'auth '，{ inserted } El，绑定(if )！ check(binding.value ) ) El.parent node El.parent node.remove child )； } } }导出默认{ install } http://www.Sina.com /
接受通过自定义命令绑定传递的参数，通过check函数进行检查，如果检查失败，通过获取当前命令所在节点的父节点，删除当前节点，实现权限控制。
思路：
//main.jsimportauthfrom './directives/auth.js ' vue.use (auth )指令注册：
模板组件v-auth=' [ ' admin ' ] '/other-components/template优缺点使用组件方式实现权限控制，权限变更后比较灵活控制
基于指令方式的权限控制虽然简单使用，但由于是通过削减dom节点实现的，因此仅控制初次。
被赋予权限后，不会随意变动，可以根据使用场景选择两种不同的方式。
相关资料1. Vue函数组件
2 .自定义指令