如何根据权限进行按钮级别控制

前言

随着互联网的发展，客户的需求越来越细，从对栏目的限制到精细到对每个按钮的控制，有许多小伙伴可能对按钮的权限控制还没有接触过，那么没有关系，我带大家一起体验一下。

模拟场景

我们带着问题去学习，会更加容易理解，一起看一下这几个问题

权限从哪里来？

这个在用户登录的时候接口根据账号进行返回权限

权限放到哪里保存？

我们会把权限直接放在 localStorage 或者vuex（pinia）都是可以的，根据搭建的环境进行选择，这里以vuex为主

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

当前用户的权限获取到了，页面的按钮也明确了，那怎么给按钮加上权限呢？，首先明确自定义指令

自定义指令

vue除了内置的指令，我们还可以自定义指令，一个指令就是一个对象，里面可以包含若干个钩子函数，首先给按钮加个自定义指令hasRole

     <el-button
          type="primary"
          :icon="CirclePlus"
          v-hasRole="['create']"
          >新增</el-button
        >

创建一个permissions.js文件，用app.directive来创建一个全局的自定义指令，app.directive里的参数如下

参数	类型	说明
name	string	自定义指令的名称
directive	Object

// 角色验证
const hasRole = {
  install: (app) => {
      app.directive('hasRole', {
          mounted(el, binding) {
          console.log(el)
          console.log(binding)
          }
      })
  }
}
export {
  hasRole
}

创建一个hasRole的自定义指令，当页面挂载完成时候处理按钮的逻辑，这里看一下打印el和binding 在控制台里，我们会发现el是绑定到按钮的html,binding是一个对象，其中value是传递给指令的值

处理按钮权限过程

• 获取vuex里存放的权限 permissions。

import store from "@/store";
// 获取当前用户的权限
const hasPermission = () => {
// 获取vuex里permissions的值
  const value = store.getters.permissions
  return value
}

• 通过 binding.value，得到当前按钮需要的权限，判断 permissions 里是否包含按钮的权限，如果用户没有某个按钮的权限，移除按钮的 DOM 元素。

// 删除节点
const removeEl = (el) => {
// 去掉按钮
 el.style.display = 'none'
}
// 角色验证
const hasRole = {
  install: (app) => {
      app.directive('hasRole', {
        // 及他自己的所有子节点都挂载完成后调用
          mounted(el, binding) {
          // 判断是否该用户拥有该权限
           if (!hasPermission().includes(binding.value[0])) {
            removeEl(el)
           }
          }
      })
  }
}

这是我们修改vuex里permissions只有delete权限，那么当前用户只有删除权限，我们的新增按钮（create权限）就会被隐藏掉

总结

我们通过封装自定义指令实现了控制按钮显示隐藏的效果