Vue权限指令控制权限详解

目录

• 第一种-自定义权限指令
• 第二种：v-if自定义控制
• 最后说明

在日常的开发过程中，我们除了使用Vue已有的指令之外，还需自定义指令，需要对DOM节点进一步操作。

在后台系统中，最常用的就是权限指令。

权限控制的原理就是在系统当前界面初始化时，判断某些DOM节点有没有权限，没有则移除此DOM。

在Vue中使用指令权限时，通常有两种控制节点的方法。第一个是对普通节点的指令控制（普通节点即是指 html 中的标签节点。），第二个则是对elementUI组件的控制。

为什么分两种呢？是因为在实际开发过程中，我发现自定义指令有时候无法移除element中的组件，例如：在使用el-tab时，下面包含了多个tab页，当某个tab页无权限访问时 想要对其进行移除，这时候自定义的指令只能移除此tab页内的内容，并不能够将此tab页一起移除。所以这时候会使用v-if进行控制。

第一种-自定义权限指令

我的写法是新建permission文件夹，此文件夹下面包含index.js、permission.js，接下来直接上代码：

index.js

import permission from './permission'
import Vue from 'vue'
Vue.directive('permission', permission)

permission.js

import store from '@/store'
async function checkPermission(el, binding) {
        const { value } = binding
        const roles = await store.getters && store.getters.permission
        if( value && value instanceof Array) {
                if( value.length > 0) {
                        const permissionRoles = value
                        const hasPermission = roles.some(role => {
                                return permissionRoles.includes(role)
                        })
                        if(!hasPermission) {
                                el.parentNode && el.parentNode.removeChild(el)
                        }
                }
        }else {
                throw new Error('需要以数组的形式传角色')
        }
}
export default {
        inserted(el, binding) {
                checkPermission(el, binding)
        },
        update(el, binding) {
                checkPermission(el, binding)
        }
}

在这里面需要解释的是权限列表的获取，我的权限列表是存储在store的permission中，所以在进入的时候直接获取permission。

最重要的一步，需要将index.js引入到main.js中去执行。

main.js

import './permission' // 此引入需要在创建Vue实例之前引用

用法：

<el-button v-permission="['add']">权限按钮</el-button>

第二种：v-if自定义控制

如果使用第一种方式的话，其是移除当前DOM下的子节点，是没办法移除当前节点的。所以这时候就需要通过自定义的v-if来控制。

思路：v-if中执行一个函数，函数传入一个权限值。在函数中判断权限值是否属于权限菜单内，返回布尔类型值。

这时我们想到，如果要定义一个函数在任何组件中都可以使用，那么要么是工具类函数，要么是mixins。如果是封装工具类函数，则没办法直接在模板中使用，而是需要在methods中使用，所以我们直接选择mixins，混入方法。

我们创建控制节点的文件controlNode.js

import store from "@/store"
export default {
        methods: {
                controlNode(node) {
                        const permission = store.getters.permission
                        let result = permission.includes(node)
                        return result
                }
        }
}

用法：

在组件中使用mixins

<template>
<div>
        <el-tabs>
                <el-tab-pane v-if="controlNode('add')"></el-tab-pane>
                <el-tab-pane></el-tab-pane>
        </el-tabs>
</div>
</template>
<script>
import controlNode from "@/permission/controlNode"
export default {
        name: "component",
        mixins: [controlNode]
}
</script>

最后说明

为什么控制节点权限要分两种情况？同样都是移除节点，为什么还要用v-if？

如果你仔细观察代码，在第一种方式中，我们移除的是 child，是将当前节点的子元素进行移除，此时当前节点依然存在。所以就出现了所分的两种情况。

那有没有办法用自定义的指令就可以完成移除呢？那当然是有的，在第一种方式中，只需要将removeChild改为remove即可。即将移除子元素改为移除当前节点本身。

原文地址：https://honker.blog.csdn.net/article/details/124495452