权限控制（directive自定义指定）

最新推荐文章于 2024-05-09 14:11:12 发布

Robber2000

最新推荐文章于 2024-05-09 14:11:12 发布

阅读量139

点赞数

文章标签： vue.js javascript 前端前端框架

本文链接：https://blog.youkuaiyun.com/m0_67302067/article/details/129640880

版权

文章介绍了如何在Vue应用中定义一个自定义指令`v-permission`，用于权限控制。该指令要求值为数组形式，如`[getData,Get]`，并在`install`方法中绑定到app。通过比较指令值与用户权限列表，决定是否移除无权限访问的元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

权限控制（自定义指令）

1、定义一个自定义指令

2、app组件use方法会默认执行文件暴露出的 install 方法

3、指令的数值必须是一个数值的形式，例如【v-premission=“[“getData,Get”]”】

//组件
<IndexEchart v-permission="['createRule,POST']" />

//权限控制规则
import store from '@/store'
function hasPermission(value, el = false) {
    // 指令输入的数值是否是一个数组
    if (!Array.isArray(value)) {
        throw new Error('需要配置权限，并以数组的形式存入')
    }
    //判断该指令的数值是否在权限列表内
    const hasAuth = value.findIndex(v => store.state.user.ruleNames.includes(v)) != -1
    //如果存在且存在该节点也同时存在，就删除该节点
    if (el && !hasAuth) {
        el.parentNode && el.parentNode.removeChild(el)
    }
    return hasAuth
}
export default {
    //app组件use方法会默认执行文件暴露出的 `install` 方法
    install(app) {
        //给app绑定自定义事件 
        //【el】代表该元素，
        //【binding.value】存放着该指令对应的数据
        app.directive('permission', {
            mounted(el, binding) {
                hasPermission(binding.value, el)
            },
        })
    }
}