vue按钮级元素多状态权限设计

Question

我们系统有6种角色，页面若干（就几个），但是几种角色都能访问这些页面，只是里面的元素权限不一样。比如某页面一个按钮，角色为R1和R2的用户可以操作，R3和R4权限的用户只能查看不能点击，R5和R6权限的用户直接隐藏看不到。而另一个输入框，可能R1和R4能操作，R2和R5只读，R3和R6隐藏看不到，等等等

网上的方法都权限只能控制一个元素的显示与隐藏，但是我们是多种状态，至少3中写、读、隐藏，可能还会有颜色样式等等

所以各位有没有什么比较好的方法

Answer 1

我的思路是这样的，让按钮声明需要的权限，而不是通过权限来控制按钮长什么样子。实现是通过自定义的指令，通过指令内部来判断，当前按钮的表现。

1. 在Vuex中设置好用户的权限关键信息 R1 R2 R3 R4
2. 在button上设置那些权限的用户可以/不可以操作，样式，之类

<button v-display="[1,2]" v-style="{'font-size': {1:'30px',3:'20px'}}">测试 R1 R2 显示</button>
<button v-disabled="[3,4]">测试 R3 R4 不可编辑</button>
<button v-style="{color:{1:'blue',2:'red'},'font-size': {1:'12px',3:'20px'}}">测试 R1 R4 改变颜色</button>

如果你觉得style写在行间太多，可以封装在methods/或者computed中

1. 封装一些自定义指令，来辅助完成

let customeDirectives = {
      style(el,binding,obj){
        let value = binding.value;
        let {currentUser} = obj.context;
        Object.keys(value).forEach((key) => {
          if(value[key][currentUser]){
            el.style[key] = value[key][currentUser];
          }else {
            el.style[key] = null;
          }
        })
      },
      disabled(el,binding,obj){
        let value = binding.value;
        let {currentUser} = obj.context;
        el.disabled = value.includes(currentUser);
      },
      display(el,binding,obj){
        let users = binding.value;
        let {currentUser} = obj.context;
        if(!users.includes(currentUser)) {
          el.style.display = 'none';
        }
      }
    }
    
    new Vue({
      el: '#app',
      directives:{
        style:{
          bind:customeDirectives.style,
          update: customeDirectives.style
        },
        disabled:{
          bind:customeDirectives.disabled,
          update:customeDirectives.disabled
        },
        display: {
          bind: customeDirectives.display,
          update: customeDirectives.display
        }
      },
      data:{
        currentUser: 2
      }
    })

Answer 2

能控制显示隐藏也就可以控制读写
v-if="status==1?true:false" :disabled="status==2||status==3?false:true"
:style="status==1?firStyle:elseStyle"
我觉得这样写简单一点把

Answer 3

vuex：state 中存 userInfo；getter 中根据 userInfo 存各个角色属性 R1/R2/R3/R4...。

具体使用就是：

<button v-if="R1&&R2" :disabled="R3&&R4">按钮</button>

根据权限不同组合判断。
你可以把这些信息封装成一个 mixin 方便各组件使用。

// 一个mixin
import { mapState, mapGetters } from 'vuex';

export default {
  computed: {
    ...mapState(['userInfo']),
    ...mapGetters(['R1, R2, R3, R4'])
  }
};

Answer 4

1、建议封装一个方法，用户判断用户和按钮之间的关系。
2、demo

公共方法：
/*
    2： 可操作
    1： 只读
    0： 不显示
*/

const checkPermission = (role, buttonType) => {
  if(buttonType == 'add'){
    if(['R1', 'R4'].includes(role)) return '2';
    if(['R2', 'R3'].includes(role)) return '1';
    return 0;
  }
}

Vue页面：
let addButtonStatus = checkPermission(role, 'add');