2013-11-28 2 views
6

AngularJS 응용 프로그램의 경로를 정의하는 동안 각 경로에 어떤 액세스 수준이 있어야하는지 나타내려면 access이라는 새 속성이 각 경로에 추가되었습니다. 이는 here에 설명 된 클라이언트 측 권한 부여 방식을 기반으로합니다.비동기 데이터로 AngularJS 구성 블록 초기화

.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 속성을 정의 할 때 사용할 수 있습니까? 이는 서 v 만이 액세스 레벨 목록을 알고 있기 때.에 필요합니다. 경로 설정에 resolve를 사용하여 서비스 &에 promise 노출에 따라 Initialize AngularJS service with asynchronous data에 대한 답변이 있지만 나는 access 때문에 경로 구성을 정의하기 전에 해결 될 비동기 호출을 필요로하는

, 내 경우에는 작동하지 않습니다 속성은 비동기 데이터에 따라 다릅니다.

어떤 옵션이 있습니까? promise/deferred 접근법이 여전히 어떻게 든 사용할 수 있습니까?

모든 의견을 많이 주시면 감사하겠습니다.

편집 :

access 조금 무엇을하고 있는지 설명하는 데, 그것은 routingConfig라는 별도의 모듈에 의해 채워되고있다. approach에서 사용자는 2 진수로 정의 된 특정 역할에 속할 수 있습니다. 예 : public : 001, user : 010, admin : 100 (등).

모든 경로의 액세스 수준은 다시 액세스 할 수있는 모든 사용자 역할의 OR 연산에 의해 정의 된 이진수가됩니다. 예를 들어 user 액세스 수준이 사용자 역할 user (010) 및 admin (100)에 의해 액세스 될 수 있으면 해당 비트 마스크는 110이됩니다. 나중에 경로에서 액세스를 확인하기 위해 사용자 역할과 액세스에 대해 AND 연산을 수행 할 수 있습니다 권한이 있는지 여부를 확인하십시오. 위의 링크에서 자세한 내용을 볼 수 있습니다.

서버 끝의 데이터는 더욱 복잡한 알고리즘에 의해 여전히 안전하므로 위와 같은 로직을 클라이언트 쪽에서 조작하더라도 이러한 사용자는 승인되지 않은 페이지의 마크 업만 볼 수 있습니다.

다시 문제가 다시 발생합니다. config 블록의 등록 정보로 사용되는 access은 서버에서 오는 비동기 데이터로 어떻게 초기화 될 수 있습니까? 이 데이터는 다음과 같이 보일 수 있습니다 :

accessLevels : { 
    'public' : '111', 
    'user' : '110', 
    'admin': '100' 
} 
+0

난 당신이 그러나 당신이 당신의 $의 routeProvider'와 함께 사용 어떤 이유로'access'를 가져올 수있는 서비스를 테스트 한 있으리라 믿고있어 access' 속성은 참조가 손실되고 나중에'access'를 사용하면 업데이트 값이 없습니다. 이것은 나를 처음 보는 이상한 것처럼 보입니다. –

+0

'액세스'를로드하는 데 필요한 정확한 정보를 지정할 수 있습니까 (아니면 광범위하게 설명 할 수 있습니까)? (나는 몇 가지 아이디어가 있지만 모두 우아하지 않다.) –

+0

문제는 '$ routeProvider'가 응용 프로그램이 실행되기 전에 _ 등록되어야한다는 것입니다. 우리가 처리하는 방식은 경로를 똑같이 정의하는 것이지만, 'module.run' 함수에서 올바른 액세스 수준을 설정하고 UI를 통해 링크에 액세스 할 수 없게 만듭니다. 사용자가이 링크를 클릭하면 앱에서 멋진 401 오류가 발생하고 모달 상자를 사용하여 더 높은 권한으로 로그인해야합니다. 이것은'$ http' 인터셉터를 통해 처리됩니다. –

답변

2

을 나는 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와 비동기 적으로 수행 또는 다른 방법은 accessbootstrap 응용 프로그램을 잡아에있는 경우 :

어쩌면 이러한 접근 방식은 [그것이 있어야 많은 유사한 경우에 확실히] 적합 수동으로.

0

그동안 문제를 해결했는지 확신 할 수 없지만 이전에 같은 문제가 발생했습니다. 내 솔루션은 ng-app과 함께 html 태그의 주 컨트롤러를 사용하는 것이 었습니다. 컨트롤러 내에서받은 서버의 액세스 수준 데이터를 사용하여 $route의 도움으로 내 경로를 정의했습니다. 따라서 경로 구성을 정의하기 전에 데이터에 액세스 할 수 있습니다. 물론 컨트롤러 안의 Auth 공장에서 약속 한 then 기능을 호출하고 거기에서 경로를 정의 할 수 있습니다.

보기 :

<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};