使用 Angular 和 Strongloop 时如何限制对页面的访问？

Question

Strongloop/loopback 有 built-in ACL 来限制对属性和函数的访问。我的问题是，在使用 AngularSDK 时，是否有适当的方法来限制对页面的访问？

前端如何查看授权状态？我正在使用 ui-路由器。

Answer 1

通常前端的授权是有问题的，因为用户可以控制他的所有浏览器。因此，您应该在后端实现授权部分。客户端可能会发送不允许的请求，但服务器应确保它们不会被执行。

为了在获得授权后启用部件，您可以有条件地在服务器端模板中加载其他文件。这可能是一个设置某些字段的 JS 文件。不幸的是，这并不能避免用户操纵您的网站并规避某些安全措施。

Answer 2

检查文档的 AngularSDK Handling 401 Unauthorized section。您可以设置一个处理程序来检测 API 何时调用 returns 401 未经授权的响应代码，并让您的 UI 显示登录表单。我已经完成了模式和整页重定向，这取决于你的敏感性和你的 ui-router 东西的结构。

将下面的代码（或类似的东西）放在 app.js 的 .config() 块中。

文档中的逐字记录：

// Inside app config block
$httpProvider.interceptors.push(function($q, $location, LoopBackAuth) {
  return {
    responseError: function(rejection) {
      if (rejection.status == 401) {
        //Now clearing the loopback values from client browser for safe logout...
        LoopBackAuth.clearUser();
        LoopBackAuth.clearStorage();
        $location.nextAfterLogin = $location.path();
        $location.path('/login');
      }
      return $q.reject(rejection);
    }
  };
});
 
// In the Login controller
User.login($scope.credentials, function() {
  var next = $location.nextAfterLogin || '/';
  $location.nextAfterLogin = null;
  $location.path(next);
});

鉴于此，您可以在 .run() 块中向 $stateChangeStart 添加一个事件侦听器 -

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
  // API call here to check if you get (or simply trigger) a 401
  // whitelist states that can be accessed publicly
  // or blacklist states that cannot be accessed without auth
  // whichever is more straightforward
  // lots of attributes available to check for various metadata attached to states and determine yes/no to continue the state change
});

请参阅此处了解 $stateChangeStart 以及传递给回调的参数：

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state

因此，虽然用户确实可以完全控制他们的浏览器并阻止此检查并强制浏览器加载视图，但他们仍然无法访问任何 API 请求的调用ui是一个有效的令牌。因此，只要您在敏感的远程方法上有适当的 ACL，视图就会加载但数据不会加载。

Answer 3

与 Strongloop 一起使用时，hiding/disabling 相关菜单、按钮或任何控件变得困难。这就是为什么我不得不 post 这个问题。

将授权耦合到 AngularJS 前端和 Strongloop API 的最佳方法是遵循 link。

https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec#.snze0ulwx

使用 Angular 和 Strongloop 时如何限制对页面的访问？

How to restrict access to pages when using Angular and Strongloop?

angularjs

strongloop

loopbackjs