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

duan
  • 32

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

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

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

回复
阅读 1.8k
4 个回答
✓ 已被采纳

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

  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
      }
    })

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

vuex:state 中存 userInfogetter 中根据 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'])
  }
};

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');
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏