vue2/vue3自定义指令——鉴权

不灭777

于 2022-05-09 17:34:33 发布

阅读量1.2k

点赞数

分类专栏： vue3 ts 文章标签： vue.js javascript typescript

本文链接：https://blog.youkuaiyun.com/Eleuuuuy/article/details/124671165

版权

vue3 同时被 2 个专栏收录

4 篇文章

订阅专栏

3 篇文章

订阅专栏

本文介绍了如何在 Vue2 和 Vue3 中创建自定义指令，用于实现权限控制（根据用户权限动态移除按钮）和背景颜色设置。在 Vue2 中，通过在 main.ts 中全局注册自定义的 'auth' 指令，可以检查 store 中的权限并决定是否显示元素。而在 Vue3 中，将权限检查集成到应用实例的 'auth' 和 'bgColor' 指令中，分别处理权限和元素背景颜色。这些自定义指令为前端应用提供了灵活的权限管理和样式控制功能。

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

vue2:

src/directives/index.ts

import Vue from 'vue';
import store from '@/store';
export default function directive() {
    Vue.directive('auth', {
        inserted: (el, binding) => {
            if (!store.state.buttons.has(binding.value)) {
                el.remove();
            }
        }
    });
}

在main.ts中全局注册：
import directive from './directives';
Vue.use(directive);

在vue文件中使用：
<el-button  v-auth="'system:role:insert'">新增</el-button>

vue3

src/directives/index.ts

import { App } from "vue";
import { useStore } from "vuex";
import createStore from "@/store";
const list = createStore.state.buttons;
// 自定义指令，用于判断按钮权限
export default function directive(app: App) {
    app.directive("auth", {
        created: (el, binding) => {
            if (!list.has(binding.value)) {
                el.remove();
            }
        },
    });
    app.directive("bgColor", {
        beforeMount: (el, binding) => {
            el.style.backgroundColor = binding.value;
        },
    });
}
其他如上。