1 回答
TA贡献2011条经验 获得超2个赞
这是一个简化的示例,但它应该为您提供有关如何根据用户角色有条件地获取和呈现数据的基本概念。
前端调用API端点AUTH数据(
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>
);
}
}
角色只是一种建议。您可以在后端通过其他方式确定当前用户有权查看哪些数据。关键是你返回给前端的数据应该只包含用户有权查看的数据。您不应该返回所有数据,然后在前端有条件地呈现它。
添加回答
举报