AngularJS $ location.path nicht umleiten

Question

Ich habe nach einer Lösung gesucht, aber ich kann immer noch nicht die $location.path() richtig funktionieren.

Der Fall ist einfach: Nach positiver Authentifizierung versuche ich, zur Wurzeladresse zurückzukehren: /#/. Der Pfad in der Adressleiste ändert sich, die Seite jedoch nicht. Was ist seltsam, wenn ich "Enter" in der Adressleiste drücke, wird die Seite neu geladen, bevor Sie zur Stammadresse gehen. Und was ist neugieriger, Ich muss mehrmals eingeben geben Sie, bevor es mich tatsächlich auf eine andere Seite umleitet. Das ist seltsam, denn so soll der "One-Page" -Ansatz nicht funktionieren.

Ich benutze Angular Router, und der Rest der Seite funktioniert ordnungsgemäß. Jeder Bildschirm wird reibungslos geladen, nachdem Sie seinen Pfad eingegeben und "Enter" gedrückt haben - kein Nachladen. Das einzige Problem ist mit dem Authentifizierungsschritt.

Wenn die App zum ersten Mal geladen wird und die /login-Seite ausgegeben wird, weil keine Authentifizierungsdetails gespeichert sind, kann die App nach positiver Authentifizierung (aber nicht immer) zur Stammadresse umgeleitet werden. Wenn jedoch die Authentifizierungsdetails während der Ausführung der App verloren gehen und der Benutzer zur Seite /login weitergeleitet wird, kann die App nicht zur Stamm-URL zurückkehren.

Ich habe ein Flussdiagramm erstellt, das zeigt, wie Routen sich ändern. Der grüne Bereich stellt den ersten Fall dar, wenn der Benutzer die App öffnet und noch nicht angemeldet ist. Der Lesebereich stellt den zweiten Fall dar, wenn der Benutzer die Authentifizierungsdetails aus irgendeinem Grund verliert (z. B. altes Token, geändertes Passwort von einer anderen Quelle). Der Benutzer wird auf die Seite /login weitergeleitet und kann nach der positiven Authentifizierung nicht zur Stamm-URL zurückkehren.

habe ich versucht, $location.path('/') in $scope.$apply einzuwickeln, aber eine Fehlermeldung erhalten, dass der Digest tatsächlich im Gange ist. Einpacken in $timeout half auch nicht. Ich kann natürlich die Seite nach dem Ändern des Pfades neu laden, aber es erzeugt einen hässlichen Effekt der verschwindenden Schnittstelle.

Unten ist der Code, der nach dem Drücken der "Login" -Taste ausgelöst wurde.

function doLogin() { 
    vm.loginInProgress = true; 

    LoginService.login(vm.username, vm.password).then(function() { 
     $location.path('/'); 
    }).catch(function() { 
     var confirm = $mdDialog.confirm() 
      .title('Authentication error') 
      .textContent('Username and/or password is invalid.') 
      .ariaLabel('Authentication error') 
      .ok('OK') 
      .cancel('Forgotten password?'); 

     $mdDialog.show(confirm).catch(function() { 
      //TODO: Forgotten password 
     }) 
    }).finally(function() { 
     vm.loginInProgress = false; 
    }); 
} 

Routen:

$routeProvider 
    .when('/login', { 
     templateUrl: 'views/login.html', 
     controller: 'LoginController', 
     controllerAs: 'vm' 
    }) 
    .when('/', { 
     templateUrl: 'views/home.html', 
     controller: 'HomeController', 
     controllerAs: 'vm', 
     resolve: { 
      init: init 
     } 
    }); 

/* @ngInject */ 
function init(ConfigService, TemperatureService) { 
var ret = {}; 

return ConfigService.finished() 
    .then(function() { 
     return TemperatureService.getSetPoint(); 
    }) 
    .then(function (data) { 
     ret['setpoint'] = data; 
     return TemperatureService.getWorkModes(); 
    }) 
    .then(function (data) { 
     ret['workmodes'] = data; 
     return ret; 
    }); 
} 

Es sieht aus wie eine seltsame Verhalten von location.path Methode. Oder ich vermisse gerade etwas. Jede Hilfe wird geschätzt.

Answer 1

In Ihrer Frage haben Sie einen resolve genommen, die den Code in dieser Entschlossenheit Funktion gegeben ausführt.

Sie müssen ein Problem in dieser init Funktion haben, die Sie für die Auflösung verwendet haben.

$routeProvider 
    .when('/login', { 
     templateUrl: 'views/login.html', 
     controller: 'LoginController', 
     controllerAs: 'vm' 
    }) 
    .when('/', { 
     templateUrl: 'views/home.html', 
     controller: 'HomeController', 
     controllerAs: 'vm', 
     resolve: { 
      init: init 
     } 
    }); 

Ihre init hier gehen,

var init = function ($q, $rootScope, $location) { 
    if ($rootScope.login) { 
     return true; 
    } else { 
     $location.path('/login') // this is a sample 
    } 
}; 

Sie können einige Probleme bei dieser Methode haben. bitte einmal prüfen.

Answer 2

Dies liegt wahrscheinlich daran, dass die Auflösungsfunktion init für die Route / nicht korrekt aufgelöst wird.

Sie können versuchen, das Ereignis $routeChangeError zu hören, um zu sehen, was schief gelaufen ist.

$rootScope.$on('$routeChangeError', function() { 
    ... 
});