Web 应用程序架构（javascript 客户端 + ASP.NET 服务器端）

Question

这个问题来自以下帖子：

OWIN cookie authentication get roles on client side

我已经为这个问题创建了一个单独的线程，因为它比上面帖子中的更通用。

简而言之：

假设我们有一个 Web 应用程序，其中 javascript 作为客户端 + ASP.NET Web api 作为服务器端，还有一个身份服务器。只有经过身份验证的用户才能访问 Web api 端点，其中一些只能由用户的特定角色访问。

现在应用程序的客户端应该根据用户的角色显示特定的项目。例如：管理员角色的用户可以看到一个额外的选项卡：管理项目。有两种方法可以实现这一点：

1. 在渲染客户端应用程序时，可以在 web api 中调用一个端点，该端点将返回用户拥有的角色。根据该结果，在 html 中显示/隐藏项目。

2. 当应用程序加载时，将返回一个端点，该端点返回结构的外观（例如：json 字符串），并基于该结构呈现客户端应用程序。在这种情况下，不会根据角色在客户端显示/隐藏 html。

现在关于第一点：有些人可能会争辩说存在安全漏洞，因为恶意用户可以修改 html 以查看他不应该看到的元素。但在这种情况下，他将看不到数据库中的任何内容，也无法加载/更新它，因为根据他在服务器端检查的角色，他将无权执行此操作。

第二点似乎更有效，因为我们将所有与身份相关的信息逻辑都保留在服务器端。而且所有不必要的内容都不在 html 中（而在第一点它被隐藏了） - 这样会带来更好的性能吗？在这种情况下，例如开发 Angular 应用程序，应用程序的 json 结构应该包括诸如 Angular 控制器名称和路由等信息。这不会增加开发应用程序的复杂性吗？

假设应用程序本身有很多角色，根据这些角色，很多项目应该是可见/不可见的。

第 1 次和第 2 次之间的优缺点？谢谢！

Answer 1

我始终坚持建议的第一点。

正如您提到的，第二种选择会增加开发的复杂性。第一次没有安全漏洞。如果您不希望您的用户修改 html 并访问应用程序中的禁止区域，只需使用 ng-if 而不是 ng-show。如果您不熟悉 - ng-if 不会只隐藏带有 display: none; 的内容。它将完全从 DOM 中删除，这导致用户无法显示该内容，因为它不在 DOM 中。

阅读本文以获取有关ng-if 和ng-show 的更详细说明：what is the difference between ng-if and ng-show/ng-hide

我通常有一个端点获取有关用户的信息 - 包括它的角色并将该用户保存到服务（工厂）中。这让我可以灵活地在应用程序的任何地方使用它，并检查用户是否可以访问它的某些部分。