인증 절차가있는 AngularJS 라우팅

Question

AngularJS에서 기본 인증 라우팅을 구현하려고합니다. 약속을 반환하는 authorize 메서드가있는 모델이 있습니다. 내가 권한 부여 함수가 true 또는 false를 반환 할 때까지 기다리는 라우팅을 기다리십시오. 완료되면 경로를 다시 시작하거나 사용자를 로그인 페이지로 리디렉션해야합니다.

나는 내가 라우팅을 중지 호출하는 방법을 다음 다시 시작하거나 로그인 리디렉션 할 필요가 본질적으로 생각합니다. 아래 코드는 내가 지금까지 가지고 있지만 일시 중지/이력서를 수행하는 방법을 잘 모르겠습니다. 어떤 아이디어?

return angular.module('d', ['ngCookies', 'ngRoute']) 
    .config(['$routeProvider', '$locationProvider', '$httpProvider', 
     function ($routeProvider, $locationProvider, $httpProvider) { 

      $routeProvider.when('/', 
      { 
       templateUrl: 'views/home.html', 
       controller: 'HomeCtrl' 
      }); 
      $routeProvider.when('/login', 
      { 
       templateUrl: 'views/login.html', 
       controller: 'LoginCtrl' 
      }); 

      $routeProvider.otherwise({ redirectTo: '/404' }); 
      $locationProvider.html5Mode(true); 

      // handle unauthorized requests by redirecting to login page 
      $httpProvider.responseInterceptors.push(
       ['$location', '$q', function ($location, $q) { 
        function success(response) { 
         return response; 
        } 

        function error(response) { 
         if (response.status === 401) { 
          $location.path('/login'); 
          return $q.reject(response); 
         } 
         else { 
          return $q.reject(response); 
         } 
        } 

        return function (promise) { 
         return promise.then(success, error); 
        } 
       }]); 

     }]) 
    .run(['$rootScope', '$location', 'Auth', function ($rootScope, $location, Auth) { 

     $rootScope.$on("$routeChangeStart", function (event, next, current) { 
      $rootScope.error = null; 
      Auth.authorize().then(function(){ 
       $location.path('/'); 
      },function(){ 
       $location.path('/login'); 
      }); 
     }); 

    }]); 

Answer 1

귀하의 솔루션은 제가 오래전에 작성한 프로토 타입과 매우 유사합니다.

서버를 만질 때마다 인증 오류가 발생하면 을 묻는 메시지 창이 나타나서 URL을 변경하지 않고 (새 URL로 변경하고 그대로 유지하게 함) .

내 구현은 또한 $ rootScope에 종속 true로 속성 "needsLogin"를 설정합니다 (401)에 대한 검사 인터셉터 기반으로했다. 페이지 템플리트는 needsLogin === true 일 때 표시되는 로그인 모달 창을 가지며 ng-view를 숨 깁니다 (이는 새 라우트가로드되었으므로 중요하지만 데이터가 누락 됨). 마지막으로 성공한 로그인시 로그인 컨트롤러는 $route.reload()을 수행 한 다음 $rootScope.needsLogin = false을 설정합니다.

작은 조각 :

<div id="main" role="main" ng-show="needsLogin === false"> 
    <div ng-view></div> 
</div> 

<div ng-show="needsLogin === true" ng-include="'views/login.html'" class="overlay"></div> 

로그인 컨트롤러가 할 수있는 일이 같은 :

function LoginCtrl($scope, $rootScope, $route, $http) { 

    $scope.login = function() { 
     $http.post(/* Somehow do your login */) 
      .success(function() { 
       var deregister = $rootScope.$on('$routeChangeSuccess', function() { 
        // hide login/show ng-view after route has been reloaded 
        $rootScope.needsLogin = false; 
        deregister(); 
       }); 
       $route.reload(); 
      }) 
      .error(function() { 
       /* handle errors */ 
      }); 
    }; 
} 

$route.reload(), 그것은 단지 전체 페이지 새로 고침하지 않은 경로를 재 - 초기화 (컨트롤러/뷰 등) . 다행히 이전에 거절 된 전화가 다시 실행되며 페이지가 정상적으로 작동합니다.