각도 UI 라우터: 상태에 대한 액세스를 방지하는 방법

각도 UI 라우터: 상태에 대한 액세스를 방지하는 방법

안녕하세요 저는 angular가 처음입니다.JS와 JS는 사용자 비판에 따라 특정 상태에 대한 액세스를 방지하려고 시도하고 있습니다.

이것은 UI 라우터의 FAQ에 기재되어 있습니다만, 올바르게 동작하지 않습니다.이 작업을 수행하려면 데이터 객체에서 정확히 무엇을 해야 합니까?

(일부 블로그 포스트 튜토리얼에서 "true"를 삽입하여 현재와 같이 사용하는 것을 보았습니다만, needAdmin이 정의되어 있지 않다고 하는 에러가 표시되기 때문에 효과가 없는 것 같습니다.)

코드는 다음과 같습니다.

angular.module('courses').config(['$stateProvider',
    function($stateProvider) {
        // Courses state routing
        $stateProvider.
        state('listCourses', {
            url: '/courses',
            templateUrl: 'modules/courses/views/list-courses.client.view.html'
        }).
        state('createCourse', {
            url: '/courses/create',
            templateUrl: 'modules/courses/views/create-course.client.view.html',
            data: {
                needAdmin: true
            }
        }).
        state('viewCourse', {
            url: '/courses/:courseId',
            templateUrl: 'modules/courses/views/view-course.client.view.html'
        }).
        state('editCourse', {
            url: '/courses/:courseId/edit',
            templateUrl: 'modules/courses/views/edit-course.client.view.html',
            data: {
                needAdmin: true
            }
        });     

    }
]);


angular.module('courses').run(['$rootScope', '$state', 'Authentication', function($rootScope, $state, Authentication) {
  $rootScope.$on('$stateChangeStart', function(e, to) {

    var auth = Authentication;

    console.log(auth.user.roles[0]);
    if (to.data.needAdmin && auth.user.roles[0] !== 'admin') {
      e.preventDefault();
      $state.go('/courses');
    }

  });
}]);

이 작업을 수행하는 가장 좋은 방법은 다음과 같습니다.

    $stateProvider.        
    state('createCourse', {
        url: '/courses/create',
        templateUrl: 'modules/courses/views/create-course.client.view.html',
        resolve: {
           security: ['$q', function($q){
               if(/*user is not admin*/){
                  return $q.reject("Not Authorized");
               }
           }]
        }
    });

이로 인해 오류가 트리거되어 허용되지 않는 경우 사용자가 이 상태에 액세스할 수 없게 됩니다.

오류를 표시해야 하거나 사용자를 다른 상태로 보내야 할 경우 $state를 처리합니다.ChangeError 이벤트:

$rootScope.$on('$stateChangeError', function(e, toState, toParams, fromState, fromParams, error){

    if(error === "Not Authorized"){
        $state.go("notAuthorizedPage");
    }

모든 상태의 관리자 액세스를 확인하려면 데코레이터를 사용하여 해결을 모든 상태에 추가할 수 있습니다.다음과 같은 경우:

$stateProvider.decorator('data', function(state, parent){
    var stateData = parent(state);
    var data = stateData.data || {};

    state.resolve = state.resolve || {};
    if(data.needAdmin){
       state.resolve.security = ['$q', function($q){
               if(/*user is not admin*/){
                  return $q.reject("Not Authorized");
               }
           }];
    return stateData;
});

저는 현재 사용하고 있는 어플리케이션에서 이와 같은 것을 구현했습니다.사용자가 로그인하지 않은 경우 로그인 폼으로 사용자를 전송합니다.admin 이외의 유저가 임의의 admin 스테이트에 액세스 하려고 하면, 에러 페이지로 전송 됩니다.

스테이트에 아무것도 없는 경우data,그리고나서to.data정의되어 있지 않습니다.이것을 시험해 보세요.

if (to.data && to.data.needAdmin && auth.user.roles[0] !== 'admin') {

언급URL : https://stackoverflow.com/questions/28518181/angular-ui-router-how-to-prevent-access-to-a-state