Vue 进阶系列教程将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！

2013年7月28日，尤雨溪第一次在 GItHub 上为 Vue.js 提交代码；2015年10月26日，Vue.js 1.0.0版本发布；2016年10月1日，Vue.js 2.0发布。

最早的 Vue.js 只做视图层，没有路由， 没有状态管理，也没有官方的构建工具，只有一个库，放到网页里就可以直接用了。

后来，Vue.js 慢慢开始加入了一些官方的辅助工具，比如路由（Router）、状态管理方案（Vuex）和构建工具（Vue-cli）等。此时，Vue.js 的定位是：The Progressive Framework。翻译成中文，就是渐进式框架。

Vue.js2.0 引入了很多特性，比如虚拟 DOM，支持 JSX 和 TypeScript，支持流式服务端渲染，提供了跨平台的能力等。Vue.js 在国内的用户有阿里巴巴、百度、腾讯、新浪、网易、滴滴出行、360、美团等等。

Vue 已是一名前端工程师必备的技能，现在就让我们开始深入学习 Vue.js 内部的核心技术原理吧！

什么是自定义指令

有关自定义指令的相关内容，请移步Vue 进阶系列丨自定义指令

适用业务场景

这里简单介绍一下，本篇文章主要解决的业务场景是什么样子的。

在后台管理平台中，我们的菜单权限是根据用户角色的不同动态变化的。

比如说，超级管理员能看到所有的菜单列表（这里说的菜单就是管理平台当中的侧边导航或顶部导航）；普通用户只能看到首页等常见的菜单，对于权限比较高的页面，比如说机构管理、角色管理、用户管理等页面，普通用户是看不到的。

这个时候，前端针对菜单的权限，就要采取一些措施了，具体操作请移步Vue 进阶系列丨权限控制 addRoute()

我们这里要讲解的是，针对某个页面的按钮进行权限控制，比如说，角色A的用户拥有机构管理的新增、删除、编辑权限；角色B的用户，拥有机构管理的编辑权限。那么对于角色B的用户来说，机构管理页面中，新增和删除按钮应该是不可见的。这个时候，仅仅是菜单权限控制是满足不了此需求的。

实现步骤

1. 用户登录成功时，将用户权限数据，存入sessionStorage中

// login.vue
<script setup lang='ts'>import { useStore } from '@/store'const store = useStore()const login = ()=>{// 请求后台接口，拿到相关的用户权限数据getUserPermissionApi().then(res=>{sessionStorage.setItem('permission',res.data)// 示例： // 页面名称：按钮权限名// ['organization:add','organization:delete','organization:update']}).catch(err=>{console.log('拿到用户权限内容报错了'）})}
</script>

1. 在项目根目录下新建一个 permission.ts 文件（这里是以vue-ts为例的）

// permission.ts// 引入vue中定义的指令对应的类型定义
import { Directive } from 'vue'
export const permission: Directive = {// 这是指令的一个生命周期mounted(el, binding) {// 获取用户使用自定义指令绑定的内容const { value } = binding;// 获取用户所有的权限const permissions = sessionStorage.getItem('permission')// 判断用户使用自定义指令，是否使用正确了if (value && value instanceof Array && value.length > 0) {// 判断传递进来的按钮权限，用户是否拥有const hasPermission = permissions.some((per) => {return value.includes(per)})if (!hasPermission) {// 当用户没有这个按钮权限时，隐藏这个按钮el.style.display = 'none'}} else {throw new Error('按钮权限指令示例： v-permission="['organization:add']"')}}
}// 注意，我们这里写的自定义指令，传递内容是一个数组，也就说，按钮权限可能是由
// 多个因素决定的，如果你的业务场景只由一个因素决定，自定义指令也可以不传递一个数组，
// 只传递一个字符串就可以了

3. 挂载到全局

// main.tsimport { createApp } from 'vue'
import App from './App.vue'
// 引用刚刚定义的自定义指令
import { permission } from './permission.ts'
// 注册自定义指令
createApp(App).directive('permission',permission)

4. 在页面中使用，这里我们在机构管理的页面中使用

// organization.vue<template><button v-permission="['organization:add']">新增按钮</button><button v-permission="['organization:update']">编辑按钮</button<button v-permission="['organization:delete']">删除按钮</button
</template>

5. 到这里，我们的自定义指令实现按钮权限的功能就已经实现了！

Vue 进阶系列教程将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！

叶阳辉

HFun 前端攻城狮

往期精彩：

• Vue 进阶系列丨Object 的变化侦测

• Vue 进阶系列丨Array 的变化侦测

• Vue 进阶系列丨虚拟DOM和VNode

• Vue 进阶系列丨Patch 和模板编译

• Vue 进阶系列丨事件相关的实例方法

• Vue 进阶系列丨生命周期相关的实例方法

• Vue 进阶系列丨生命周期

• Vue 进阶系列丨自定义指令

• Vue 进阶系列丨最佳实践

• Vue 进阶系列丨Mixin 混入

• Vue 进阶系列丨权限控制 addRoute()

• Vue 进阶系列丨插槽

• Vue 进阶系列丨npm发布vue组件