Question

我正在一个项目中，我的UI组件与登录用户角色/权限紧密相关。（我在前端使用角度4，在后端使用弹簧）

成功登录用户后端服务器后，将返回用户对象及其权限。根据这些权限，我需要在UI上呈现各种组件。

演示用户对象如下：

{
    "empId": "1",
    "username": "prasad.parab@u.com",
    "Permissions": [
        "viewOwnLeaveData",
        "viewOwnWorkData",
        "viewTeamLeaveData",
        "viewOrgLeaveData",
        "viewOrgWorkData"
    ],
    "password": "*****************",
    "accountNonLocked": true,
    "accountNonExpired": true,
    "enabled": true,
    "credentialsNonExpired": true
}

场景1 ：如果登录的用户具有2个权限（viewOwnLeaveData，viewOwnWorkData），我想在仪表板上呈现两个描述他的离开数据和工作数据的图表。

场景2 ：如果登录用户具有4个权限（viewOwnLeaveData，viewOwnWorkData，viewTeamLeaveData，viewTeamWorkData），那么我想在仪表板上渲染4个图表等。

当用户单击任何图表时，其他选项也取决于权限。（即，如果用户具有updateOwnLeaveData权限，则应该看到编辑按钮）

目前，我正在单个组件（DashBoardComponent）中执行此操作，在此我添加了多个

if (user.permissions.indexOf(viewOwnLeaveData) != -1) {
// code to create and populate own leave data chart
}

if (user.permissions.indexOf(viewTeamLeaveData) != -1) {
// code to create and populate team leave data chart
}
.
.
.

在这种设计中，我面临两个问题

由于所有逻辑都写在单个组件中，因此随着权限列表的增加，if块会增加，代码变得非常庞大。
当我单击任何组件时，下一个元素将加载到UI上（例如，单击myLeaveData图表将在图表下方填充请假记录列表），如果我按返回按钮，它将重定向到登录页面（预期隐藏请假列表）记录）

以更好的模块化方式做到这一点的任何方法吗？

Answer 1

在单个组件中添加整个逻辑将使您的应用程序紧密耦合且不可调用。您需要为每个权限相关功能创建组件。

在运行时，您可以使用* ngIf来显示或隐藏（或者）可以使用视图容器Ref动态呈现组件。

角色应用中基于角色的元素填充

1 个答案: