首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
拉钩
V2EX  ›  程序员

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

  •  
  •   zek · 62 天前用 Android 发布 · 1515 次点击
    这是一个创建于 62 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    前端 vue,后端 java

    19 回复  |  直到 2018-10-12 18:28:31 +08:00
        1
    ruoxie   62 天前
    之前写一个 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
    westooy   62 天前
    我也没想到有什么更好的方案,无非就是绑定一些 prop,封装个函数去处理,本质还是一样的,这就是尴尬的地方,前端堆积了太多当前用户无关的东西
        3
    xc917563264   62 天前
    用 js 实现状态模式说不定可以
        4
    514656282   62 天前
    每次看到这个头像都觉得好看
        5
    turan12   62 天前
    关于头像的规则和建议

    V2EX 禁止使用任何低俗或者敏感图片作为头像
    如果你是男的,请不要用女人的照片作为头像,这样可能会对其他会员产生误导
    建议请尽量不要使用真人头像,即使是自己的照片,使用别人的照片则是坚决被禁止的行为
        6
    cexy   62 天前
    让后台渲染好 dom 节点返回,,,,或者直接 node 写前端吧
        7
    echol   62 天前
    落到 UI 怎么都要 显示|不显示 吧
    如果可以独立成组件的&需要切换的地方多的,以组件为单位切换
    或者按权限映射出可以显示的东西,再注入容器
        8
    mokeychan   62 天前
    交给 UI 咯
        9
    duan602728596   62 天前
    搞一个组件,类似这样
    <Authority :part="['权限 A', '权限 B']">
    <button type="primary">按钮</button>
    </Authority>
    传入权限,判断允许组件渲染的权限在不在用户的权限列表里,在列表里就显示,不在列表里就隐藏
        10
    zjlletian   62 天前
    @cexy 这就不分离了啊
        11
    ballshapesdsd   62 天前
    二珂你好,二珂再见
        12
    gsggwbz   62 天前 via Android
    试试 shiro 标签
        13
    patrickwhisper   62 天前
    权限模型如果用 if else 判断会造成代码非常不好维护,比较建议将代码抽象一层,分为代码 + 配置,让配置去描述权限。
        14
    Biwood   62 天前
    用 v-if 是最直观且灵活的方法,写个全局的 method,比如 checkPermission,返回 true 或 false
        15
    cexy   62 天前
    @zjlletian 不需要分离的时候,就不需要强行分离,动静结合或者服务器渲染 ,效果更好
        16
    breezeFP   62 天前
    @gsggwbz #12 前后端分离还能用 shiro 标签吗
        17
    cexy   62 天前
    这么说吧,你这个问题本身就带歧义,既然要分离,那么数据就是用来判断并渲染的,既然不想在 dom 上进行复杂渲染,那分离出来干嘛,直接服务器渲染得了
        18
    flyingghost   62 天前
    分离 -> 前端负责渲染或不渲染。
    前端判断 -> 拿到权限列表作为判断依据。
    是否渲染 -> 每个组件独立主动自我判断 /外部角色强制批量判断。就这两种思路。剩下的无非就是封装而已。
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2071 人在线   最高记录 4019   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.1 · 19ms · UTC 15:40 · PVG 23:40 · LAX 07:40 · JFK 10:40
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1