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

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

  •  
  •   zek · 2018-10-12 15:10:30 +08:00 via Android · 4666 次点击
    这是一个创建于 2219 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    前端 vue,后端 java

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

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