请选择 进入手机版 | 继续访问电脑版

后台管理权限管理(二) 权限按钮控制的实现

[复制链接]
小甜心 发表于 2020-12-31 18:09:43 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
先上图


  在背景项目中,不同的登录者有不同的脚色,大概上面的编辑、删除、详情这些按钮不是每个人都能点击的。不同的人登录系统有不同的操纵权限。下面是他的实现方式。
首先,在store/modules下创建user.js
  1. export default {  state: {      perms: [],  // 用户权限标识聚集  },  getters: {   },  mutations: {      setPerms(state, perms){  // 用户权限标识聚集          state.perms = perms;      }  },  actions: {}}
复制代码
然后封装kdButton组件,代码如下:
[code]  <script type="text/javascript">import store from &#39;../store&#39;export default {  name: "KtButton",  props:{    size: {  // 按钮尺寸      type: String,      default: &#39;mini&#39;    },    type: {  // 按钮类型      type: String,      default: &#39;primary&#39;    },    disabled: {  // 按钮是否禁用      type: Boolean,      default: false    },    perms: {  // 按钮权限标识,外部使用者传入      type: String,      default: null    }  },  data() {    return {    }  },  methods: {    // 按钮操纵函数    handleClick(){      this.$emit(&#39;click&#39;,{})    },        hasPerms(perms) {      // 根据权限标识和外部指示状态举行权限判断      return this.hasPermission(perms) & !this.disabled    },    /**   * 判断用户是否拥有操纵权限   * 根据传入的权限标识,检察是否存在用户权限标识聚集   * @param perms   */    hasPermission (perms) {      let hasPermission = false      let permissions = store.state.user.perms      for(let i=0, len=permissions.length; i
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )