vue自定义指令实现按钮权限代码思路实现

写在前面

一直想将这个按钮级别的权限的一个思路和实现过程记录一下，不过一直忙于项目，所以也没有太多时间整理，其实思路很简单，代码实现的过程也不复杂，最近博主我辞职了，所以就整理了一下关于这一块的代码，一个是作为记录，一个是让我们实现的时候尽可能的直接拿来就用，按钮级别的权限其实在PC端的操作平台是比较常见的一个处理，还是很必要的！废话不多说了，下面简单的说一下思路和实现过程

实现思路

​ 用户登录之后-〉后台返回权限列表-〉通过指令传递的当前按钮权限进行判断当前的按钮权限是不是在当前用户的权限列表里面-〉不在就不显示 在的话就显示 大致的一个思路就是这样 下面我写一个Demo给大家演示一下这个过程

代码实现

自定义指令

• code

代码语言：javascript复制

/*
 * @use: 
 * @description: 自定义指令 控制按钮权限
 * @SpecialInstructions: 无
 * @Author: clearlove
 * @Date: 2022-05-19 18:03:23
 * @LastEditTime: 2022-05-19 18:30:06
 * @FilePath: /universal-background-template/src/directives/has.js
 */
export default {
    bind(el, binding) {
        //拿到当前用户的所有的权限  假设权限列表['add','view','update']
        const permissions = localStorage.getItem('permissions')
        //当前页面需要的权限
        const needPermissions = binding.value
        //判读是否有权限
        const hasPermission = permissions.includes(needPermissions)
        //如果没有权限 就将该按钮隐藏 这里需要做一个延时处理，因为我们需要等待dom加载结束再进行处理Node节点
        if (!hasPermission) {
            setTimeout(() => {
                el.parentNode.removeChild(el)
            }, 0)
        }
    }
}

• 引用

代码语言：javascript复制

<!--
 * @use: 
 * @description: 权限测试页面
 * @SpecialInstructions: 无
 * @Author: clearlove
 * @Date: 2022-05-19 18:11:52
 * @LastEditTime: 2022-05-19 18:24:40
 * @FilePath: /universal-background-template/src/pages/permission/index.vue
-->
<template>
  <div>
    <button v-has="'add'">增加</button>
    <button v-has="'edit'">编辑</button>
    <button v-has="'del'">删除</button>
  </div>
</template>
<script>
import hasDirective from "../../directives/has";
export default {
  name: "permission",
  directives: {
    has: hasDirective,
  },
  data() {
    return {};
  },
  methods: {},
};
</script>
<style lang="less" scoped>
</style>

• 效果演示

写在后面

以上代码版本信息

• Vue2.6
• elementUi2.15

code 权限

0 人点赞