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

先上图

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

首先，在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