Vue3的权限控制

最新推荐文章于 2025-09-04 14:05:16 发布

原创最新推荐文章于 2025-09-04 14:05:16 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在Vue3中实现权限控制，通过自定义全局权限指令`v-perms`，结合后台传输的权限数据，动态显示或隐藏按钮。示例展示了新增、删除和导出操作的权限匹配逻辑，确保只有当用户具有全部对应权限时，按钮才会显示。

Vue3之权限控制

假设
新增有【‘sys:home:add1’,‘sys:home:edit’,‘sys:home:edit2’】这几个权限
删除有【‘sys:home:add’,‘sys:home:edit3’,‘sys:home:edit’】这几个权限
导出有【‘sys:home:add’,‘sys:home:edit’,‘sys:home:edit’】这几个权限

	<!-- 第一个权限与后台传输过来的就不匹配，所以不显示 -->
    <a-button v-perms="['sys:home:add1','sys:home:edit','sys:home:edit2']">新增</a-button>
    <!-- 其中有一个权限与后台传输过来的就不匹配，所以不显示 -->
    <a-button v-perms="['sys:home:add','sys:home:edit3','sys:home:edit']">删除</a-button>
    <!-- 所有的权限都是匹配的，才显示 -->
    <a-button v-perms="['sys:home:add','sys:home:edit','sys:home:edit']">导出</a-button>

在这里插入图片描述
最终代码

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import * as Icons from '@ant-design/icons-vue'

const app = createApp(App);

// 自定义一个全局权限指令 `v-perms`
app.directive('perms', (el, binding) => {
    const perms = binding.value; //按钮的权限
    const permissions = store.getters.getPermissions; //获取的权限集合
    if (perms.length > 0) {
        const hasPermission = perms.some((item: any) => {
            const flag = permissions.includes(item);
            if(!flag) {
                return true;
            }
        })
        if(hasPermission) {
            el.parentNode && el.parentNode.removeChild(el);
        }
    }
});

app.use(store).use(router).use(Antd).mount('#app')

// 全局使用图标
const icons: any = Icons;
for (const i in icons) {
    app.component(i, icons[i]);
}