后台管理权限管理（二）权限按钮控制的实现

止语_WJ

于 2020-12-30 14:51:43 发布

阅读量2.5k

点赞数 2

分类专栏：后台管理文章标签： javascript vue

本文链接：https://blog.youkuaiyun.com/qq_48365272/article/details/111988718

版权

本文介绍如何在后台管理系统中实现权限按钮控制，针对不同角色的用户显示不同的操作按钮。通过在store/modules/user.js中设置权限，并封装kdButton组件，根据perms属性在页面中动态控制按钮的显示。

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

先上图

在这里插入图片描述

在后台项目中，不同的登录者有不同的角色，可能上面的编辑、删除、详情这些按钮不是每个人都能点击的。不同的人登录系统有不同的操作权限。下面是他的实现方式。

首先，在store/modules下创建user.js


export default {
   
  state: {
   
      perms: [],  // 用户权限标识集合
  },
  getters: {
   
 
  },
  mutations: {
   
      setPerms(state, perms){
     // 用户权限标识集合
          state.perms = perms;
      }
  },
  actions: {
   }
}

然后封装kdButton组件，代码如下：

<!--此组件为操作按钮的封装-->

最低0.47元/天解锁文章

后台管理权限管理（二） 权限按钮控制的实现

先上图

后台管理权限管理（二）权限按钮控制的实现