rt,目前的方案是用户登录后将用户的权限返回给前端,前端拿到权限列表去做 if 判断,有就显示按钮,没有就隐藏。
这样感觉有点麻烦,要对每个按钮都要做 if 判断。有没有更好的解决方案。
前端 vue,后端 java
1
ruoxie 2018-10-12 16:04:10 +08:00
之前写一个 demo,直接移除 dom 元素可能比 display="none"好一点
<template> <div> <v-btn color="primary">正常按钮</v-btn> <!--arg:role,function modifiers:all any default:any --> <v-btn color="success" v-permission:function.all="permission">权限按钮</v-btn> <br> <v-btn color="error" @click="updatePermission">更新按钮所需权限</v-btn> </div> </template> <script> const USER_PERMISSION=["FUNCTION_USER_ADD","FUNCTION_USER_DEL"]; const USER_ROLE=["ROLE_TEST1","ROLE_TEST2"]; export default { data() { return { permission:['FUNCTION_USER_ADD','FUNCTION_USER_DEL'], flag:true }; }, methods:{ updatePermission(){ this.permission=this.flag?["USER_TEST3"]:['FUNCTION_USER_ADD','FUNCTION_USER_DEL']; this.flag=!this.flag; } }, directives: { permission: { // 指令的定义 bind: function(el,binding) { let checkCodes=[]; if(binding.arg==="function"){ checkCodes=USER_PERMISSION; }else if(binding.arg==="role"){ checkCodes=USER_ROLE; }else{ checkCodes=USER_PERMISSION.join(USER_ROLE); } let access=true; if(binding.modifiers.all){ for(let need of binding.value){ if(!checkCodes.some(s=>s===need)){ access=false; break; } } }else{ access=false; for(let need of binding.value){ if(checkCodes.some(s=>s===need)){ access=true; break; } } } if(!access){ el.style.display="none"; } console.log("bind:"+JSON.stringify(binding),access); }, update:function(el,binding){ let checkCodes=[]; if(binding.arg==="function"){ checkCodes=USER_PERMISSION; }else if(binding.arg==="role"){ checkCodes=USER_ROLE; }else{ checkCodes=USER_PERMISSION.join(USER_ROLE); } let access=true; if(binding.modifiers.all){ for(let need of binding.value){ if(!checkCodes.some(s=>s===need)){ access=false; break; } } }else{ access=false; for(let need of binding.value){ if(checkCodes.some(s=>s===need)){ access=true; break; } } } if(!access){ el.style.display="none"; }else{ el.style.display="inline-flex"; } console.log("update:"+JSON.stringify(binding),access); } } } }; </script> |
2
codespots 2018-10-12 16:23:33 +08:00
我也没想到有什么更好的方案,无非就是绑定一些 prop,封装个函数去处理,本质还是一样的,这就是尴尬的地方,前端堆积了太多当前用户无关的东西
|
3
xc917563264 2018-10-12 17:18:37 +08:00
用 js 实现状态模式说不定可以
|
4
514656282 2018-10-12 17:19:40 +08:00
每次看到这个头像都觉得好看
|
5
turan12 2018-10-12 17:28:49 +08:00
关于头像的规则和建议
V2EX 禁止使用任何低俗或者敏感图片作为头像 如果你是男的,请不要用女人的照片作为头像,这样可能会对其他会员产生误导 建议请尽量不要使用真人头像,即使是自己的照片,使用别人的照片则是坚决被禁止的行为 |
6
cexy 2018-10-12 17:32:57 +08:00
让后台渲染好 dom 节点返回,,,,或者直接 node 写前端吧
|
7
echol 2018-10-12 17:36:58 +08:00
落到 UI 怎么都要 显示|不显示 吧
如果可以独立成组件的&需要切换的地方多的,以组件为单位切换 或者按权限映射出可以显示的东西,再注入容器 |
8
mokeychan 2018-10-12 17:42:24 +08:00
交给 UI 咯
|
9
duan602728596 2018-10-12 17:50:24 +08:00
搞一个组件,类似这样
<Authority :part="['权限 A', '权限 B']"> <button type="primary">按钮</button> </Authority> 传入权限,判断允许组件渲染的权限在不在用户的权限列表里,在列表里就显示,不在列表里就隐藏 |
11
ballshapesdsd 2018-10-12 17:52:23 +08:00
二珂你好,二珂再见
|
12
gsggwbz 2018-10-12 17:52:46 +08:00 via Android
试试 shiro 标签
|
13
patrickwhisper 2018-10-12 17:54:29 +08:00
权限模型如果用 if else 判断会造成代码非常不好维护,比较建议将代码抽象一层,分为代码 + 配置,让配置去描述权限。
|
14
Biwood 2018-10-12 17:55:21 +08:00
用 v-if 是最直观且灵活的方法,写个全局的 method,比如 checkPermission,返回 true 或 false
|
17
cexy 2018-10-12 18:03:01 +08:00
这么说吧,你这个问题本身就带歧义,既然要分离,那么数据就是用来判断并渲染的,既然不想在 dom 上进行复杂渲染,那分离出来干嘛,直接服务器渲染得了
|
18
flyingghost 2018-10-12 18:16:12 +08:00
分离 -> 前端负责渲染或不渲染。
前端判断 -> 拿到权限列表作为判断依据。 是否渲染 -> 每个组件独立主动自我判断 /外部角色强制批量判断。就这两种思路。剩下的无非就是封装而已。 |
19
elioti 2018-10-12 18:28:31 +08:00
|