Vue 进阶系列丨自定义指令实现按钮权限功能

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.ts


import { 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组件