Question

在定义AngularJS应用程序的路由时，为了指示每个路由应具有的访问级别，每个路由都添加了一个名为access的新属性。这基于here所述的客户端授权方法。

.config块如下所示：

app.config(['$routeProvider', '$locationProvider', '$httpProvider',
  function ($routeProvider, $locationProvider, $httpProvider) {

      var access = routingConfig.accessLevels; //Initialize with asynch data instead

      $routeProvider.
        when('/home', {
            templateUrl: '/Templates/home.html',
            controller: 'homeController',
            access: access.user
        });
      $routeProvider.
      when('/private', {
          templateUrl: '/Templates/private.html',
          controller: 'adminController',
          access: access.admin 
      });

      //...more route configurations

   }]);

将该方法的核心逻辑放在一边，我只想知道如何用一些异步数据初始化access变量，以便在为每个变量定义access属性时可用它路线？这是必需的，因为只有服务器知道访问级别列表。

虽然Initialize AngularJS service with asynchronous data的答案基于在服务中公开promise＆amp;在路由配置中使用resolve，它在我的情况下不起作用，因为我需要在定义路由配置之前解析异步调用，因为access属性依赖于异步数据。

我有哪些选择？ promise/deferred方法是否仍可以某种方式使用？

任何建议都会非常感激。

编辑：

为了描述access正在做些什么，它由一个名为routingConfig的单独模块填充。在approach中，用户可以属于某个角色，该角色被定义为二进制数。例如，public：001，user：010，admin：100（依此类推）。

任何路由的访问级别将再次是由允许访问它的所有用户角色的OR操作定义的二进制数。因此对于例如如果用户角色user（010）和user（100）可以访问admin访问级别，则其位掩码将为110.稍后检查路由上的访问权限，我们可以对用户角色和访问级别执行AND操作以查看它是否已获得授权。详情见上述链接。

请注意，服务器端的数据仍然是更复杂的算法，因此即使在客户端操作上述逻辑，这样的用户也只能看到任何未授权页面的标记。 / p>

再次回到手头的问题。如何使用来自服务器的异步数据初始化access块中用作config块中的属性的accessLevels : { 'public' : '111', 'user' : '110', 'admin': '100' }。此数据可能如下所示：

{{1}}

Answer 1

因此，如果我理解正确，应用程序应该无响应，直到access可用。那么，异步获取access是什么意思呢？

也许这种方法是合适的[在很多类似的情况下肯定应该是]：

<script src="angular.js"></script>
<script>
 angular.module('config').constant(
    <%= // JSON.stringify your config and access %>
 );
</script>
<script src="app.js"></script>

如果你真的必须异步完成，那么使用XHRHttpRequest或其他方式手动抓取你的应用程序access和bootstrap。

Answer 2

不确定你是否在此期间解决了问题，但我前段时间遇到了同样的问题。我的解决方案是使用html标记上的主控制器和ng-app。在控制器内部，我使用从我的服务器接收的访问级别数据，并在$route的帮助下在那里定义了我的路由。因此，在定义路由配置之前，可以访问数据。您当然也可以从控制器内的then工厂调用promise Auth函数，并在那里定义您的路由。

视图：

<html ng-app="app" ng-controller="MainController">
 ...
</html>

控制器：

var MainController = ['$scope', '$http', '$route', 'Auth', function ($scope, $http, $route, Auth) {
    var accessLevels = Auth.accessLevels;

    $route.routes['/index'] = {templateUrl: "pages/index", controller: IndexController, access: accessLevels.guest};
    ....
    $route.routes['null'] = {redirectTo: '/index', controller: IndexController};

使用异步数据初始化AngularJS配置块

2 个答案: