【Vue】按钮权限

顾鸟

于 2022-04-06 22:05:53 发布

阅读量929

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_40881695/article/details/124001601

vue 专栏收录该内容

43 篇文章

订阅专栏

该博客详细介绍了在Vue应用中如何实现权限管理，包括在`Home.vue`组件中通过API获取用户菜单和操作权限，并存储到Vuex store中。同时，定义了一个名为`has`的Vue指令，用于在`User.vue`组件中动态控制按钮的显示和移除，基于用户权限决定按钮是否可见。这一实现确保了前端界面根据用户权限动态展示相应功能。

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

// components/Home.vue

async getMenuList() {
      try {
        const { menuList, actionList } = await this.$api.getPermissionList();
        this.userMenu = menuList;
        this.$store.commit("saveUserMenu", menuList);
        this.$store.commit("saveUserAction", actionList);
      } catch (error) {
        console.error(error);
      }
    }

// main.js

// 按钮权限
app.directive('has', {
    beforeMount: (el, binding) => {
        // 获取按钮权限
        let actionList = storage.getItem('actionList')
        let value = binding.value
        // 判断列表中是否有对应按钮权限标识
        let hasPermission = actionList.includes(value)
        if (!hasPermission) {
            el.style = 'display:none;'
            // 添加一个宏任务
            setTimeout(() => {
                el.parentNode.removeChild(el)
            }, 0);
        }
    }
})

// views/User.vue

<el-button 
		@click="handleEdit(scope.row)"
    size="mini"
		v-has:add="'user-delete'"
>编辑</el-button>
<el-button
    type="danger"
    size="mini"
    @click="handleDel(scope.row)"
    v-has:add="'user-delete'"
>删除</el-button>