请教一下大佬们，前后端分离，如何做到权限粒度细分到页面按钮

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2232 天前的主题，其中的信息可能已经有所发展或是发生改变。

rt，目前的方案是用户登录后将用户的权限返回给前端，前端拿到权限列表去做 if 判断，有就显示按钮，没有就隐藏。

这样感觉有点麻烦，要对每个按钮都要做 if 判断。有没有更好的解决方案。

前端 vue，后端 java

权限

按钮

Vue

粒度

19 条回复 • 2018-10-12 18:28:31 +08:00

ruoxie

2018-10-12 16:04:10 +08:00

之前写一个 demo，直接移除 dom 元素可能比 display="none"好一点
<template>
<div>
<v-btn color="primary">正常按钮</v-btn>

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