Angular 为非授权用户禁用字段的通用解决方案

我有一个项目的客户端语言是Angular 2。我的应用程序有几个页面，所有页面都有不同的权限。例如，我有一个员工页面、一个书籍页面、一个地点页面、一个打卡页面等等

每个页面都具有CanEdit和CanView权限。登录用户可能具有位置的CanEdit权限，但可能没有书籍页面的CanEdit权限

我想做一个通用的解决方案，我会写在一个地方，并将所有的网页，我不希望重复代码在所有的网页。类似于：如果用户对当前页面具有CanEdit权限，则删除所有输入的只读属性，如果用户没有CanEdit权限，则添加只读属性

目前项目中没有任何角色，但我愿意接受建议

---

这有可能做到吗？

我能想到的最佳解决方案是创建一个用户状态为CanEdit和CanView的服务。然后，在html页面上，使用：

<button *ngIf="userService.CanView">a button</button>

a按钮

---

要显示/隐藏（事实上，要使其存在或不存在）要显示的元素

您可以使用诸如CanView、CanRead等指令和一个共享服务来完成，该服务将检查用户是否可以阅读或编辑页面。在指令中，如果用户没有CanView权限，您将能够重定向用户；如果用户没有CanEdit权限，您将能够禁用所有输入

您的意思是，在服务中，用户将具有以下状态：CanViewLocations、CanEdit Locations、CanViewBooks、，应用程序每一页的CanEditBooks？取决于您想要的权限精度级别。最基本的方法是只有两种状态：CanView和CanEdit，最终在任何页面上使用它们。您只需在要保护的按钮/字段/div上设置*ngIf条件