AngularJS: Ochrona tras z angularjs w zależności od tego, czy użytkownik jest autoryzowany?

Question

Właśnie rozpocząłem pracę z rozwijaną aplikacją AngularJS, wszystko idzie dobrze, ale potrzebuję sposobu na zabezpieczenie tras, aby użytkownik nie mógł wejść na tę trasę, jeśli nie jest zalogowany. Rozumiem znaczenie ochrony po stronie usług i będę się tym zajmować.

Znalazłem kilka sposobów ochrony klienta, jedno wydaje się użycie następujących

$scope.$watch(
    function() { 
     return $location.path(); 
    }, 
    function(newValue, oldValue) { 
     if ($scope.loggedIn == false && newValue != '/login') { 
      $location.path('/login'); 
     } 
    } 
); 

gdzie muszę umieścić to w .run w app.js?

A drugi sposób znalazłem się za pomocą dyrektywy i przy użyciu on - routechagestart

informacja jest tutaj http://blog.brunoscopelliti.com/deal-with-users-authentication-in-an-angularjs-web-app

I byłoby naprawdę zainteresowany czyjegoś pomocy i informacji zwrotnych na temat zalecanego sposób.

Answer 1

Korzystanie rozwiązuje powinno pomóc tutaj: (kod nie testowane)

angular.module('app' []).config(function($routeProvider){ 
    $routeProvider 
     .when('/needsauthorisation', { 
      //config for controller and template 
      resolve : { 
       //This function is injected with the AuthService where you'll put your authentication logic 
       'auth' : function(AuthService){ 
        return AuthService.authenticate(); 
       } 
      } 
     }); 
}).run(function($rootScope, $location){ 
    //If the route change failed due to authentication error, redirect them out 
    $rootScope.$on('$routeChangeError', function(event, current, previous, rejection){ 
     if(rejection === 'Not Authenticated'){ 
      $location.path('/'); 
     } 
    }) 
}).factory('AuthService', function($q){ 
    return { 
     authenticate : function(){ 
      //Authentication logic here 
      if(isAuthenticated){ 
       //If authenticated, return anything you want, probably a user object 
       return true; 
      } else { 
       //Else send a rejection 
       return $q.reject('Not Authenticated'); 
      } 
     } 
    } 
}); 

Answer 2

Innym sposobem przy użyciu atrybutu resolve z $routeProvider:

angular.config(["$routeProvider", 
function($routeProvider) { 

    "use strict"; 

    $routeProvider 

    .when("/forbidden", { 
    /* ... */ 
    }) 

    .when("/signin", { 
    /* ... */ 
    resolve: { 
     access: ["Access", function(Access) { return Access.isAnonymous(); }], 
    } 
    }) 

    .when("/home", { 
    /* ... */ 
    resolve: { 
     access: ["Access", function(Access) { return Access.isAuthenticated(); }], 
    } 
    }) 

    .when("/admin", { 
    /* ... */ 
    resolve: { 
     access: ["Access", function(Access) { return Access.hasRole("ADMIN"); }], 
    } 
    }) 

    .otherwise({ 
    redirectTo: "/home" 
    }); 

}]); 

ten sposób, jeśli Access nie rozwiąże obietnica, wydarzenie $routeChangeError zostanie zwolnione:

angular.run(["$rootScope", "Access", "$location", 
function($rootScope, Access, $location) { 

    "use strict"; 

    $rootScope.$on("$routeChangeError", function(event, current, previous, rejection) { 
    if (rejection == Access.UNAUTHORIZED) { 
     $location.path("/login"); 
    } else if (rejection == Access.FORBIDDEN) { 
     $location.path("/forbidden"); 
    } 
    }); 

}]); 

Zobacz pełny kod na this answer.