사용자 역할에 따라 단일 보기에 서로 다른 내용 표시

사용자 역할에 따라 단일 보기에 서로 다른 내용 표시

각 SPA 어플리케이션에 메뉴가 있다고 가정해 봅시다.이제 집, 회사 정보, 통신사 기회 등 모든 사용자에게 기본 옵션이 표시되도록 하겠습니다.

또, 유저 관리, 관리 투고등, 관리자 전용의 몇개의 옵션도 가지고 싶다고 생각하고 있습니다.

또한 사용자 역할을 제공하는 API 액세스 포인트가 있다고 가정합니다.또한 사용자 역할이 /api/users/me에서 취득한 오브젝트 내에 있다고 가정합니다.

이러한 관리 툴을 일반 사용자가 볼 수 없도록 캡슐화하는 가장 좋은 방법은 무엇일까요?

견해 사이에 어떤 유산이 있나요?Dango에서처럼요? DOM 요소를 허가받지 않은 사용자로부터 숨길 수 있는 방법이 있나요?(네, 클라이언트측인 것은 알고 있습니다).

메뉴는 일반적인 컴포넌트이기 때문에 다른 뷰는 사용하고 싶지 않습니다.

이전 질문에 대한 답변이 모두 "아니오"인 경우 남은 질문은 "이것에 가장 적합한 구현은 무엇인가?"입니다.커스텀 디렉티브("E" + "A")는 다음과 같이 말합니다.

<limitedAccss admin>Edit page</limitedAccess>
 <limitedAccss user>view page</limitedAccess>

아니면 사용자 객체에 조건을 붙여서 일반 ng-show를 사용하는 것인가요?

해결책은 이 바이올린에 있습니다.

http://jsfiddle.net/BmQuY/3/

var app = angular.module('myApp', []);

app.service('authService', function(){

  var user = {};
  user.role = 'guest';
  return{
    getUser: function(){
      return user;
    },
    generateRoleData: function(){
      /* this is resolved before the 
         router loads the view and model.
         It needs to return a promise. */
      /* ... */
    }
  }
});

app.directive('restrict', function(authService){
    return{
        restrict: 'A',
        priority: 100000,
        scope: false,
        compile:  function(element, attr, linker){
            var accessDenied = true;
            var user = authService.getUser();

            var attributes = attr.access.split(" ");
            for(var i in attributes){
                if(user.role == attributes[i]){
                    accessDenied = false;
                }
            }


            if(accessDenied){
                element.children().remove();
                element.remove();           
            }


            return function linkFn() {
                /* Optional */
            }
        }
    }
});

IE 7 또는 8에서 이 지시어를 사용하려면 요소의 하위 항목을 수동으로 삭제해야 합니다. 그렇지 않으면 오류가 발생합니다.

  angular.forEach(element.children(), function(elm){
    try{
      elm.remove();
    }
    catch(ignore){}
  });

사용 가능한 예:

<div data-restrict access='superuser admin moderator'><a href='#'>Administrative options</a></div>

Karma + Jasmine을 사용한 단위 테스트:주의:done콜백 기능은 Jasmine 2.0에서만 사용할 수 있습니다. 1.3을 사용하는 경우 waits를 사용해야 합니다.대신.

  describe('restrict-remove', function(){
    var scope, compile, html, elem, authService, timeout;
    html = '<span data-restrict data-access="admin recruiter scouter"></span>';
    beforeEach(function(){
      module('myApp.directives');
      module('myApp.services');
      inject(function($compile, $rootScope, $injector){
        authService = $injector.get('authService');
        authService.setRole('guest');
        scope = $rootScope.$new();
        // compile = $compile;
        timeout = $injector.get('$timeout');
        elem = $compile(html)(scope);
        elem.scope().$apply();
      });
    });
    it('should allow basic role-based content discretion', function(done){
        timeout(function(){
          expect(elem).toBeUndefined(); 
          done(); //might need a longer timeout;
        }, 0);
    });
  });
  describe('restrict-keep', function(){
    var scope, compile, html, elem, authService, timeout;
    html = '<span data-restrict data-access="admin recruiter">';
    beforeEach(function(){
      module('myApp.directives');
      module('myApp.services');
      inject(function($compile, $rootScope, $injector){
        authService = $injector.get('authService');
        timeout = $injector.get('$timeout');
        authService.setRole('admin');
        scope = $rootScope.$new();
        elem = $compile(html)(scope);
        elem.scope().$apply();
      });
    });

    it('should allow users with sufficient priviledsges to view role-restricted content', function(done){
      timeout(function(){
        expect(elem).toBeDefined();
        expect(elem.length).toEqual(1);
        done(); //might need a longer timeout;
      }, 0)
    })
  });

요소를 실제로 DOM에서 삭제하지 않는 ng-if(V1.2 이후만 현재 불안정) 또는 ng-show를 사용하지 않는 요소에 대한 일반적인 액세스 제어 지시입니다.

ng-if확실히 내가 할 수 있는 방법이야!모델레이션 도구를 뷰 전체에 배치하기만 하면 사용자가 가지고 있어야 할 경우 표시됩니다. ng-show/ng-hide1.1.5 이전 버전의 angular를 사용하는 경우에도 괜찮습니다.

라이브 데모! (여기를 클릭)

js가 주최자 액션을 호출했다고 해서 백엔드/서버/api가 요구에 응하지 않도록 하는 것이 매우 중요합니다.서버는 항상 각 콜에 대해 인가를 검증합니다.

ng-hide 또는 ng-hide가 괜찮다면

html은 보기일 뿐이며 보안, 보안에 대한 책임을 지지 않습니다.

사용자와 관련된 권한 개체를 갖는 것이 유용할 수 있습니다.사용자 데이터를 가져올 때 권한 json을 얻은 다음 각도로

<div ng-if="user.permissions.restrictedArea">Very restricted area</div>

사용자 Json은 다음과 같습니다.

{name:"some one", permissions:{restrictedArea:false,sandbox:true}} //and so on...

언급URL : https://stackoverflow.com/questions/18043412/displaying-different-content-within-a-single-view-based-on-the-users-role