根据用户权限控制页面按钮和表单是否只能查看和可编辑

Question

就是如果用户只有查看内容的权限，那么系统所有页面按钮和表单全部设为只读的
项目用的vue和iview 请问有什么方便点的操作吗？谢谢

Answer 1

如果麻烦点做，用户登录完后肯定已知权限，按钮和表单设为只读，所有事件触发都加入用户权限，比如一个优惠券的编辑事件是

couponFunc () {
  if (sessionStorage.userPower != 1) { //假设权限为1是只读
      ...
  }
}

这么做肯定是麻烦，但是我觉得你说的‘所有页面按钮和表单全部设为只读的’,你左侧的导航栏肯定是可以点吧，要么他不是只读，是只能看到首屏的数据，不能做任何切换
所以另一种方案是在导航栏的右侧(数据展示部分)追加一层model层，当用户权限为只读的时候

Answer 2

一个取巧的方案：在结构最外层增加一个样式类，这个类通过用户权限来判定是有还是无，没有权限的类使用css样式禁止页面操作，一定要保证这个类在你不想让他点击的范围的最高层，不想禁用的功能可不要包含在它的结构下：

// template
:class="{'non-authority': !authority}"

// script
this.authority = true/false

// style
.non-authority {
  pointer-events: none;
}

另外还可以通过为每个控件设置disabled或者readonly的关联变量来控制可否编辑。但稍微麻烦一些。

Answer 3

用户权限存到store里面，然后封装一下按钮和表单，比如PermissionButton，从store里面取出权限设置只读可写

Answer 4

我个人建议你和后台沟通一下，在你的管理页面写一个赋权功能，当你登录的时候把当前用户的所有权限的ID封装成一个数组存在store里，例如：rule:[],然后你写一个全局的方法，例如checkCode(val){}，在方法里判断你的传值是否存在于rule中，如果存在就返回true,否则就false,在你的子页面中只要判断checkCode(当前按钮的节点值)是否为true，就可以了