Gibt es eine Möglichkeit, die Benutzerauthentifizierung mit angular-ui-routes statt $ stateChangeStart zu aktivieren?

Question

Ich bin neu mit Angular js & versuchen, eine Website mit Angular & Rest API (Codeigniter) zu machen, aber Zeug mit Benutzerauthentifizierung.

Ich habe viele Dinge ausprobiert, um es passieren zu lassen, aber bisher kein Glück, ich möchte meine Routen mit angular-ui-routes mit Benutzerauthentifizierung basierend auf Benutzerrolle einstellen.

Zur Zeit überprüfe ich die Benutzerauthentifizierung über einen Dienst, der jedesmal unter der $stateChangeStart API aufruft, aber da ich mehr URLs hinzufügen werde, wird es panisch, Bedingungen zu setzen.

So suche ich nach einer Lösung, in der ich Benutzer-Authentifizierung & Benutzerrolle unter meiner ui-routes setzen kann.

Ich bin nicht sicher, dass diese Frage hier schon einmal gestellt wird, aber ich habe keine feste Lösung dafür bekommen, bitte beraten Sie, wenn es möglich ist, wenn ja, wie kann ich es dann erreichen?

Answer 1

Sie sollten resolve auschecken.

Grundsätzlich kann man so etwas tun:

//You can inject any service here. 
//Return a promise to be resolved or an ordinary object 
function tryAuth($state, Auth){ 
    return Auth.currentUser() 
      //In this case currentUser() will return a promise containing an instance 
      //of the user if it exists or call $http to try to authenticate the user from 
      //saved credentials. 
      .catch(function(){ 
      //If the promise rejects for any reason, move to a different state. 
      $state.go('login'); //This is just an example 
      }); 
} 

$stateProvider 
.state('login', { 
    url: '/login', 
    templateUrl 'partials/login.html', 
    controller: 'loginCtrl' 
}) 
.state('profile', { 
    url: '/profile', 
    templateUrl: 'partials/profile.html', 
    controller: 'profileCtrl', 
    resolve: { 
    //In the controller you can inject user to recieve the actual user 
    user: tryAuth 
} 
}); 

Dies kann in vielerlei Hinsicht überarbeitet werden, aber Sie bekommen die Idee.

Eine andere Lösung, die ich in der Vergangenheit verwendet wird, ist so etwas wie dies:

//In config clause 
$stateProvider 
.state('login', { 
    url: '/login', 
    templateUrl 'partials/login.html', 
    controller: 'loginCtrl' 
}) 
.state('profile', { 
    url: '/profile', 
    templateUrl: 'partials/profile.html', 
    controller: 'profileCtrl', 
    requireLogin: true 
}); 

//In run clause 
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) { 
     console.log('Moving to state: ' + toState.name + ' from state: ' + fromState.name); 
     /* Require users to login to certain sections */ 
     if (toState.requireLogin && !Auth.currentUser) { 
      event.preventDefault(); 
      Auth.reAuthenticate().then(function() { 
       //Complete the transition after authentication 
       $state.go(toState, toParams); 
      }).catch(function() { 
       loginModal().then(function() { 
        //Complete the transition after authentication 
        $state.go(toState, toParams); 
       }).catch(function() { 
        //If the state is not abstract 
        if (!fromState.abstract)  
         //Go back to the state you came from 
         return $state.go(fromState, fromParams); 
        $state.go('default'); 
       }); 
      }); 
     } 
});