前端权限设计实现 (按钮等)

1.使用v-if

//store.state.authIds 为该用户所有的权限 格式为数组 ['home','admin']
 
authRequest(auth) {     
      if (auth && !store.state.authIds.includes(auth)) {
        return false;
      } else {
        return true;
      }
    },

2.使用指令

 Vue.directive("auth", {
    inserted: function (el, binding) {     
      if (binding.value && !store.state.authIds.includes(binding.value)) {
        el.parentNode.removeChild(el)
      }
    }
  });
 
//指令方式实现的权限控制，使用起来会比较简洁，但是是通过删减 dom 节点的方式实现的，因此只有在第一次时控制。
//指令 也可以在update 时候 去做处理

3.组件