如何为Cordapp各节点加载不同UI并控制功能可见性

刚好做过类似的需求，给你分享几个实用的实现思路，都是基于Cordapp默认UI框架的常规做法：

1. 基于节点身份直接判断 #

这是最直接的方式，利用Cordapp UI提供的身份获取API，拿到当前运行UI的节点身份，然后通过条件渲染控制组件显示/隐藏。

比如在React风格的Cordapp UI中，可以用内置的useIdentityV2钩子获取当前节点的X500名称，然后做判断：

import { useIdentityV2 } from '@cordapp/react-components';

function MyOperationButton() {
  const { me } = useIdentityV2();
  // 假设节点A的X500名称是 "O=NodeA,L=London,C=GB"
  const isNodeA = me?.name?.toString() === "O=NodeA,L=London,C=GB";

  return isNodeA ? (
    <button onClick={handleOperation}>执行专属操作</button>
  ) : null;
}

这种方式适合固定节点的权限控制，缺点是硬编码了节点身份，如果节点名称变动需要同步修改UI代码。

2. 基于节点自定义角色属性 #

如果需要更灵活的角色控制，可以在节点的node.conf配置文件中添加自定义属性，比如：

custom.nodeRoles = ["initiator", "admin"]

然后在UI中通过RPC调用获取节点的配置信息，或者在后端编写一个简单的RPC端点返回当前节点的角色，再根据角色判断：

async function getNodeRoles() {
  const nodeInfo = await rpcClient.call('nodeInfo');
  // 从nodeInfo的customFields中提取自定义角色
  return nodeInfo.customFields.find(f => f.key === "custom.nodeRoles")?.value;
}

function MyOperationButton() {
  const [roles, setRoles] = useState([]);

  useEffect(() => {
    getNodeRoles().then(setRoles);
  }, []);

  const hasPermission = roles.includes("initiator");

  return hasPermission ? (
    <button onClick={handleOperation}>执行专属操作</button>
  ) : null;
}

这种方式更灵活，不需要修改UI代码，只需要调整节点配置就能改变权限。

3. 基于业务状态的参与方校验 #

如果权限和具体的业务状态绑定（比如只有合约的发起方才能执行某个操作），可以先从后端查询当前业务状态的参与方列表，再和当前节点身份对比：

async function getStateParticipants(stateId) {
  const state = await rpcClient.call('queryStateById', stateId);
  return state.data.participants;
}

function MyOperationButton({ stateId }) {
  const { me } = useIdentityV2();
  const [participants, setParticipants] = useState([]);

  useEffect(() => {
    getStateParticipants(stateId).then(setParticipants);
  }, [stateId]);

  const isParticipant = participants.some(p => p.toString() === me?.name?.toString());

  return isParticipant ? (
    <button onClick={handleOperation}>执行专属操作</button>
  ) : null;
}

重要注意事项 #

千万不要只在UI端做权限控制！UI的隐藏只是前端层面的限制，恶意用户可以通过直接调用RPC接口绕过UI执行操作。所以必须在后端的Flow中添加对应的权限校验：

@InitiatingFlow
@StartableByRPC
class MyExclusiveFlow : FlowLogic<Unit>() {
    override fun call() {
        val myIdentity = serviceHub.myInfo.legalIdentities.first().name
        // 校验调用方身份
        if (myIdentity.toString() != "O=NodeA,L=London,C=GB") {
            throw FlowException("无权限执行此操作")
        }
        // 执行业务逻辑
    }
}

这样就能保证无论从UI还是直接调用RPC，权限控制都是有效的。

内容的提问来源于stack exchange，提问作者userAG