angularJS 리소스 기반 권한 부여 라우팅을 설계하는 방법은 무엇입니까?

Question

저는 angularJS를 사용하여 블로그 시스템을 구축 중이며 이제 특정 리소스에 대해 사용하기 쉬운 리소스 인증 흐름을 구축하려고합니다. 예를 들어, 다음 상태 : PROPOSALITEM, PROPOSALITEM.VIEW 및 PROPOSALITEM.EDIT입니다. PROPOSALITEM은 하위 상태에 대해 제공된 :proposalId에 의해 proposalItem을 해결하는 부모 상태입니다. PROPOSALITEM.VIEW은 모든 사용자가 액세스 할 수있는보기 상태이며 PROPOSALITEM.EDIT은 proposal owner에만 액세스 할 수있는 편집 페이지입니다.

이 기사의 angularJS에서 role 기반 인증 흐름을 수행하는 데 유용한 구조가 있음을 발견했습니다 : Techniques for authentication in AngularJS applications. 그러나 지금 필요한 것은 사용자가 경로에 액세스 할 수 있는지 여부를 결정하기 위해 리소스의 소유권을 기반으로합니다. 그리고 소유자 권한으로 확인해야하는 proposal 모델과 같은 많은 리소스가 있습니다. 이 모든 모델에는 owner 열이 제공됩니다. 이 문제를 해결할 수있는 일반적인 해결책이 있습니까? (각 모델의 인증 코드는 유지 보수가 어렵 기 때문에 자체 해결 부분에 넣지는 않겠습니다.)

/* Abstract states. Resolve proposalItem */ 
.state('PROPOSALITEM', { 
    abstract: true, 
    url: '/proposals/:proposalId', 
    template: '<ui-view/>', 
    resolve: { 
     proposalItem: function($stateParams, ProposalDataService) { 
      return ProposalDataService.getItem($stateParams.proposalId); 
     } 
    } 
}) 
/* View states. Allows all users to access */ 
.state('PROPOSALITEM.VIEW', { 
    abstract: true, 
    url: '/view', 
    template: '...' 
}) 
/* Edit states. Allows only the proposal owner */ 
.state('PROPOSALITEM.EDIT', { 
    url: '/edit', 
    template: '...', 
    resolve: { 
     proposalItem: function($q, proposalItem, UserDataService) { 
      var me = UserDataService.getMe(); 
      // me: { 
      //  _id: '1', 
      //  name: '...' 
      // } 
      if (proposalItem.owner._id === me._id) { 
       // Authorized. 
       return proposalItem; 
      } else { 
       // Not authorized. 
       var deferred = $q.defer(); 
       deferred.reject(ERROR_KEYS.NOT_AUTHORIZED); 
       return deferred.promise; 
      } 
     } 
    } 
}) 

Answer 1

이것은 내가이 사건을 일반적으로 처리하는 방법입니다.

.state('PROPOSALITEM.EDIT', { 
url: '/edit', 
template: '...', 
resolve: function (proposalItem, YourResourcePermission) { 
    return YourResourcePermission.check(proposalItem); 
} 

})

이런 식으로 :

yourapp.factory('YourResourcePermission', function() { 
    return { 
     check: function (resource) { 
      var me = UserDataService.getMe(); 
      // return a promise which is resolved with the data 
      // if the user has permission, or rejected otherwise. 
     } 
    }; 
}); 

그런 다음 당신이 필요로하는 상태에 대한 해결 PARAM으로이 서비스를 사용 : 인증을 처리하도록되어 서비스를 만들기 전용 (재사용 할 수있는) 서비스의 경로에서 모든 권한 논리를 유지할 수 있습니다.

동일한 요구 사항을 필요로하는 주를 몇 개 보유하고있는 경우 Angular $ provide.decorator를 사용하여 사용자 지정 논리를 자동으로 주에 주입 할 수 있습니다. 참고 : https://github.com/christopherthielen/ui-router-extras/blob/master/src/dsr.js#L10 및 https://stackoverflow.com/a/26848546/3794660은 $ stateProvider를 장식하고 기본적으로 'resolve'매개 변수가 이미 설정된 사용자 정의 상태 유형을 만드는 방법에 대한 참조로 사용됩니다.

희망이 있으면 도움이됩니다.