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

react 能否像 vue 自定义指令控制按钮权限

  •  
  •   ohohohh · 2022-11-16 10:17:31 +08:00 · 3231 次点击
    这是一个创建于 756 天前的主题,其中的信息可能已经有所发展或是发生改变。
    以前学习 vue 权限控制的时候,是在按钮组件加上指令判断例如:
    <Button v-has="add" /> 这样按钮如果没有 add 权限就隐藏。
    请问下 react 是否有这样自定义指令的权限?我看大部分都是在按钮上封装一个组件判断控制的,先看看有没有更加简单的方法
    17 条回复    2022-11-17 10:16:06 +08:00
    shakukansp
        1
    shakukansp  
       2022-11-16 10:25:27 +08:00   ❤️ 1
    有还叫 react ?
    Huelse
        2
    Huelse  
       2022-11-16 10:45:33 +08:00
    应该有类似实现的组件库
    NessajCN
        3
    NessajCN  
       2022-11-16 11:09:09 +08:00   ❤️ 2
    { v-has==="add" && (<Button />) }
    TWorldIsNButThis
        4
    TWorldIsNButThis  
       2022-11-16 11:23:25 +08:00 via iPhone
    写个权限的 hoc 然后 wrap 需要权限的组件
    sjhhjx0122
        5
    sjhhjx0122  
       2022-11-16 11:27:56 +08:00
    写个权限组件包一下要权限的内容,写个 hook 用 ref 控制一下 dom ?真想要 react 写法又想要指令去用 solidjs 吧
    Envov
        6
    Envov  
       2022-11-16 11:33:57 +08:00
    用 AuthProvider 封装 hooks 控制,api 类似这样
    const {hasAuth,HasNoPermissions}=useAuth("add")
    if(!hasAuth}{
    return <HasNoPermissions/>
    }
    sarices
        7
    sarices  
       2022-11-16 11:33:59 +08:00   ❤️ 2
    // AuthBtn
    import React, { useState, useEffect, useRef } from 'react';
    import { Button } from 'antd';

    const AuthBtn: React.FC<{}> = (props) => {
    let { authId, children } = props;
    // btnIds 应该有后台接口返回,告诉前端用户有哪些按钮权限
    let btnIds = ['read', 'edit'];
    let hasAuth = btnIds.includes(authId);
    // 这里可以根据实际需求封装
    return <Button disabled={!hasAuth}>{children}</Button>;
    };
    export default AuthBtn;

    // index.ts
    <AuthBtn authId="read">read 只读权限</AuthBtn>
    <AuthBtn authId="write">write 写入权限</AuthBtn>


    作者:胖达 n
    链接: https://juejin.cn/post/6959834563895902245
    来源:稀土掘金
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
    otakustay
        8
    otakustay  
       2022-11-16 12:46:39 +08:00   ❤️ 1
    <AuthGuard ensure="add"><Button /></AuthGuard>
    daliusu
        9
    daliusu  
       2022-11-16 14:05:38 +08:00
    首先 vue 通过自定义指令去控制权限是百分之百会有问题的,自定义指令只能操作 dom 不能模拟出生命周期,根本无法做到完美的权限管控(组件依旧在走生命周期和各种 watch computed )复杂代码在这种状态下一定会出和预期不一致问题。其次 react 很多人说到了用高阶组件,但是如果满屏幕各种组件都是额外包了一层就为个权限真的合适? 这个东西最完美的做法是自己写 babel 插件去扩展,让 babel 去套一层走类似高级组件的功能,不但能实现真正完美的自定义指令管控权限,还可以实现 v-if. v-show v-for
    ohohohh
        10
    ohohohh  
    OP
       2022-11-16 14:10:51 +08:00
    @sarices #7 我现在用的就是这种,感谢
    ragnaroks
        11
    ragnaroks  
       2022-11-16 14:31:01 +08:00
    type ButtonProps = {visable:boolean,children:ReactElement|ReactElement[]|string};
    const Button = function(props:ButtonProps) : ReactElement {
     if(!props.visable){return <i />;}
     return <button>{props.children}</button>;
    };


    <div className="page">
     <Button visable={user.hasAddGrant}>Click</Button>
    </div>
    ragnaroks
        12
    ragnaroks  
       2022-11-16 14:32:48 +08:00   ❤️ 1
    react 非常自由,vue 的“指令”可以上面多人提到的 hooks 、props 来实现。如果是打算系统学习 react 的话,最好先丢掉 vue 的那一套思想,用 ui = f(x) 方式思考。
    AyaseEri
        13
    AyaseEri  
       2022-11-16 14:33:29 +08:00
    export const IF = (props) => props.if && props.children
    296727
        14
    296727  
       2022-11-16 15:34:50 +08:00
    Chad0000
        15
    Chad0000  
       2022-11-16 15:37:57 +08:00   ❤️ 1
    @daliusu #8
    Angular 就可以这样写,也不会有生命周期问题。
    xiaojun1994
        16
    xiaojun1994  
       2022-11-16 18:40:52 +08:00
    const Button = withAuth(RawAutton)
    DICK23
        17
    DICK23  
       2022-11-17 10:16:06 +08:00
    用高阶组件包装一层
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5560 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 02:11 · PVG 10:11 · LAX 18:11 · JFK 21:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.