javascript - 保护 Angular 属性

Question

我是新手，我只是想问一下，有什么办法可以保护你的 Angular 变量/属性吗？

就像我有一个从客户端和服务器端进行身份验证的单页应用程序。 对于简单示例，我有 2 种用户类型:简单用户和管理员。

这是一个基本的 ng-view:

<div class="container">
  <div class="admin-view" ng-show="isAdmin">
  .
  .
  </div>
  <div class="user-view" ng-show="!isAdmin">
  .
  .
  </div>
</div>

在我的app.js

app.run(function($rootScope,$route, $http){
  var user = {};
  $rootScope.isAdmin = false;
  $rootScope.getUser = function(){
    $http({
      methop: 'GET',
      url: getMyUserPlease(...)
    }).then(function successCallback(response){
      user = response;
      if (user.role === 'admin'){
        $rootScope.isAdmin = true;
      } else {
        $rootScope.isAdmin = false;
      }
    })
  }
})

它工作正常，但如果我在浏览器控制台中检查它，我可以将 isAdmin 属性设置为 true 并且我可以看到我看不到的所有内容必须要看。 只需在浏览器控制台中输入这些:

$rootScope = angular.element(document).scope();
$rootScope.isAdmin = true;
$rootScope.$apply();

是否有任何好的做法来保护“内容”？

谢谢

Answer 1

TLDR 你真的做不到。

简单的答案是不要相信用户不应该看到的信息的 Angular ，为此使用后端授权。由于 Angular 在浏览器中运行，浏览器的所有者可以做他们想做的事，包括更改数据。

最好的解决方案是创建一个指令，通过端点回调您的应用程序并控制端点上的身份验证。

如果 Dom 未获得授权，我还会考虑使用 ngIf 来避免显示 Dom。不同之处在于 ng-show hide 使用 display : none，而 ng-if 阻止 Dom 渲染。

附言人们给你的 hacks 可能会通过混淆来工作，但永远不会万无一失