Jak sprawdzić logowanie lub inny status przed uruchomieniem trasy w Angular z routeProvider?

Question

Załóżmy, że mam 4 trasy - 2 wymagają zalogowania użytkownika, 2 nie. Moja aplikacja startowych wygląda następująco:

 $routeProvider.when('/open1',{templateUrl:'/open1.html',controller:'Open1'}); 
     $routeProvider.when('/open2',{templateUrl:'/open2.html',controller:'Open2'}); 
     $routeProvider.when('/secure1',{templateUrl:'/secure1.html',controller:'Secure1'}); 
     $routeProvider.when('/secure2',{templateUrl:'/secure2.html',controller:'Secure2'}); 

Trasy /open1/open2 i są otwarte dla wszystkich, podczas trasy /secure1 i /secure2 wymagać od użytkownika, aby zalogować się, a jeśli nie, podjąć pewne działania, na przykład przekieruj do logowania lub uruchom ostrzeżenie. Mogę określić stan użytkownika za pomocą usługi i wywołania Auth, np. Auth.isLogin(). Więc wynik będzie:

• zamiar /open1 i /open2 zawsze iść do szablonu i kontrolera deklarowanej powyżej
• jeśli Auth.isLogin() zwraca true, /secure1 i /secure2 iść do wyżej zadeklarowana szablonu i kontrolera
• jeśli Auth.isLogin() zwraca false, /secure1 i /secure2 wykonaj inne czynności, np. $location.path('/login')

I mógłby put logikę w Secure1 i Secure2 kontrolerów, która sprawdza, ale to jest powtarzalne i miesza się obowiązków, sprawia, że ​​trudniej testować itp

Czy istnieje sposób, że mogę użyj $routeProvider, aby zadeklarować "sprawdź tę trasę i tę trasę, a jeśli nie, przekieruj"? Myślałem o użyciu w pewnym sensie resolve, ale nie jestem do końca pewien, jak to zrobić (dokumenty na temat resolve nie są bardzo jasne i kilka pomocnych przykładów).

EDIT:

na podstawie poniższych odpowiedzi, wydaje się, istnieją trzy filozofie w ten sposób:

• Korzystanie resolve sprawdzić zalogowany i nie obietnicę, a następnie połowu zdarzenie $routeChangeError do przekierowanie http://www.sitepoint.com/implementing-authentication-angular-applications/
• Korzystanie tylko $routeChangeStart imprezę, by sprawdzić zalogowany i przekierować http://arthur.gonigberg.com/2013/06/29/angularjs-role-based-auth/
• Korzystanie prostu rozwiązać, by sprawdzić rejestrowane i n i przekierowanie http://midgetontoes.com/blog/2014/08/31/angularjs-check-user-login

Druga opcja jest tym, co zasugerowali ci dwaj respondenci.

Answer 1

jak w moim powyższych uwag, są 3 różne ścieżki (plus zdolność używać dyrektywy, jeśli chcesz kontrolować ją w szablonach html). Skończyło się następujące

https://midgetontoes.com/angularjs-check-user-login/

który zasadniczo jest następująca:

$routeProvider.when('/secure', { 
    templateUrl: '/secure.html', 
    controller: 'Secure', 
    resolve:{ 
     loggedIn:onlyLoggedIn 
    } 
}); 

A potem onlyLoggedIn:

var onlyLoggedIn = function ($location,$q,Auth) { 
    var deferred = $q.defer(); 
    if (Auth.isLogin()) { 
     deferred.resolve(); 
    } else { 
     deferred.reject(); 
     $location.url('/login'); 
    } 
    return deferred.promise; 
}; 

Proste, działa jak czar. Jeśli kiedykolwiek będę potrzebował dyrektywy, wciągnę ten utwór do służby.

Answer 2

miałem ten sam problem i zrobiłem to w ten sposób:

var app = angular.module('myModule',["ui-bootstrap"]); 

A następnie słuchać na locationChange w aplikacji (będzie to również wywołać onEnter strony)

app.run(function ($rootScope, $location, $cookieStore) { 
$rootScope.$on("$locationChangeStart", function (event, next, current) { 
    //Here you can check whatever you want (servercall, cookie...) 
}); 
} 

I Mam nadzieję że to pomoże!

Answer 3

This blog post dotyczy uwierzytelniania użytkownika w AngularJS przy użyciu dyrektyw.

Usługa $ route emituje $ routeChangeStart przed zmianą trasy.

Jeśli nie używasz dyrektyw, możesz złapać to wydarzenie, wywołując app.run (możesz umieścić je po kodzie, w którym definiujesz trasy [app.config]). Np

pełnego ujawnienia użyć ui.router i to jest przystosowany kod z $stateChangeStart używać w aplikacji

var app = angular.module('app'); 

app.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/open1',{templateUrl:'/open1.html',controller:'Open1'}); 
    $routeProvider.when('/open2',{templateUrl:'/open2.html',controller:'Open2'}); 
    $routeProvider.when('/secure1',{templateUrl:'/secure1.html',controller:'Secure1'}); 
    $routeProvider.when('/secure2',{templateUrl:'/secure2.html',controller:'Secure2'}); 
}]); 

app.run(['$rootScope', '$location', 'Auth', function($rootScope, $location, Auth) { 
    $rootScope.$on('$routeChangeStart', function(event, currRoute, prevRoute){ 
     var logged = Auth.isLogin(); 

     //check if the user is going to the login page 
     // i use ui.route so not exactly sure about this one but you get the picture 
     var appTo = currRoute.path.indexOf('/secure') !== -1; 

     if(appTo && !logged) { 
      event.preventDefault(); 
      $location.path('/login'); 
     } 
    }); 
}]);