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

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的关联变量来控制可否编辑。但稍微麻烦一些。