javascript - 在 AngularJS 中实现授权

Question

我想在 AngularJS 中实现授权。在我的某种社交媒体项目中，不同的 Angular 色甚至相同的 Angular 色可能会看到不同的 View 文件。

例如，假设我们有两个不同的 Angular 色:客户和公司。

客户和公司在共享 View 文件中可能有不同的内容，例如公司可以对其个人资料进行评分，而客户则不能。 (不同的 Angular 色)。

或者，某个客户可能会看到页面中的按钮，而另一个客户却看不到。 (相同 Angular 色)

如您所见，我无法通过简单地检查 Angular 色来实现授权，并且在某些情况下我需要与服务器进行通信。

我有多种选择:

• 在我的 Controller 范围内创建一个具有相应权限的变量，其默认值为 false:

  $scope.auth = {
canRate: false,
isConnected: false
};

  然后连接到服务器并根据响应更改 auth 对象的值。并使用ng-if在我的 View 文件中显示或隐藏元素。

• 创建指令并向其传递以逗号分隔的权限。

  <button auth="canRate,isConnected"></button>

  然后连接到服务器以检查权限。如果所有这些都为 true，则显示该元素。

• 使用resolve: {...}并在路由时从服务器获取所有必要的数据，这会增加每个页面的加载时间。

我想知道有没有更好的方法来解决这个问题？任何形式的帮助或评论将不胜感激。

注意:当然我有服务器端身份验证和授权!我只想根据用户 Angular 色或我解释的其他一些条件在 View 文件中显示一些元素。这些元素类似于按钮或链接，否则我可以针对每种情况使用不同的 View ，而不是使用共享 View 和隐藏元素。

无论如何，我知道这些方法只是为了展示目的，并不能解决安全挑战。

Answer 1

首先，我喜欢 AngularJS。但是，与所有 Web 客户端框架一样，严格意义上来说，您无法在 AngularJS 中实现授权。

您不能相信 Web 客户端会向用户隐藏数据。如果服务器将数据发送到客户端，即使您使用 ng-hide 来避免显示它，他们仍然可以找到查看它的方法(例如使用 fiddler)。

所以，你必须在服务器端实现授权。现在，假设您这样做:

AngularJS 非常适合根据从服务器接收的数据构建动态 Web 界面。因此，您的服务器应该只发送允许您的客户端查看的数据。然后，您可以使用 ng-hide 或 ng-if 来避免显示本来会显示该数据的组件。

此外，您的服务器甚至可以发送一个对象，其中包含用户可用的可能操作列表。然后您可以在按钮中使用 ng-hide ，以便在操作不可用时不显示它们。

即使如此，您仍需要对服务器端进行编码以忽略不允许用户执行的操作。