Question

我有一个使用javaee 7的其余Java后端和一个react / redux应用程序。相同的应用程序被n个不同的客户使用。每个客户可以要求m个不同于其他客户的角色。例如，一个客户可以付费查看列表中的另一列客户不应该看到的列。问题是..是否有一种模式或方法可以轻松处理隐藏或显示列表中的列，或以某种形式隐藏/显示字段的可能性？（用户启用功能）

客户X付费以查看客户列表中的电话号码

客户Y根本看不到电话号码。

针对两者发布的应用程序是相同的。

服务器如何在不与前端应用程序耦合的情况下将其提供给前端应用程序？

谢谢。

稍后又添加了一个问题：

是的，反应部分很清晰。我将添加一些信息以使其更加清晰。关键是“是否要从创建表单中隐藏电话号码字段？”服务器应如何将此信息提供给前端？它应该发送一个空的数据对象吗？

Answer 1

这是一个简化的示例，但是它应该为您提供有关如何根据用户角色有条件地获取和呈现数据的基本思想。

前端调用具有身份验证数据的API端点（在此示例中为userId和token）
后端根据身份验证数据确定角色，并返回与此角色相关的数据（例如，如果角色允许，则包含phone）
前端呈现响应数据（例如，如果"Hidden"不存在，则呈现phone）

您的React组件的外观如下：

class CustomerList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            customers: []
        };
    }
    componentDidMount() {
        // fetch list data
        fetch('https://myapi.com/api/getCustomers', {userId: 12345, token: someToken})
            .then(res => res.json())
            .then(response => {
                this.setState({customers: response.customers});
            });
    }
    render() {
        const { customers } = this.state;
        return (
            <div className="customers">
                {customers.length && 
                    <ul>
                        {customers.map(customer => (
                            <li>
                                <div className="name">
                                    Name: {customer.name}
                                </div>
                                <div className="phone">
                                    Phone: {customer.phone || "Hidden"}
                                </div>
                            </li>
                        ))}
                    </ul>
                }
                {!customers.length && 
                    <div>Loading...</div>
                }
            </div>
        );
    }
}

角色只是一个建议。在后端，您可以通过其他方法确定当前用户有权查看的数据。关键是您返回到前端的数据应仅包括用户有权查看的内容。您不应该返回所有数据，然后有条件地将其呈现在前端。

其余服务器应如何管理用户启用？

1 个答案: