Angular 1.5 $ routerOnActivate auf Root-Router

Question

Ich möchte sicherstellen, dass der Benutzer ordnungsgemäß angemeldet ist, bevor Sie zu einer der Komponenten, die er/sie versucht zu erreichen, zu gelangen, wenn sie nicht angemeldet sind.

Meine Idee ist eine Überprüfung in der $routerOnActivate im Root-Router zu tun. Welches zu mir das Problem für irgendwelche Unterwege lösen würde.

Allerdings scheint nichts zu passieren, wenn ich nur versuche, etwas zu loggen. Beispiel:

angular 
    .module('app') 
    .config(function($locationProvider) { 
     $locationProvider.html5Mode(true); 
    }) 
    .value('$routerRootComponent', 'app') 
    .component('app', { 
      templateUrl:'landing.html', 
      controller: MainController, 
      $routeConfig: [ 
       { path: '/', name: 'Dashboard', component: 'dashboard', useAsDefault: true }, 
       { path: '/media', name: 'Media', component: 'media'} 
       ... 
      ] 
    }); 


function MainController(){ 
    this.$routerOnActivate = function(next, previous){ 
     console.log('activated', next, previous); 
    }; 
} 

Der gleiche Code this.$routerOnActivate funktioniert, wenn ich es in einem der Komponenten setzen, die in der routeConfig angegeben sind. Aber natürlich möchte ich nicht in jeder Komponente dieselbe Überprüfung vornehmen, sondern global einmal lösen.

Was ist der Ansatz für 1.5?

Answer 1

Paste aus meinem Kommentar als

angefordert

Was führen Sie Ihre Überprüfung der Laden auf der Seite? Dies würde perfekt in einem Winkel laufen.

Und wenn Sie den Ablauf der Sitzung behandeln möchten, können Sie allen Anfragen einen Interceptor hinzufügen und auf eine 401-Antwort achten.

Answer 2

Statt eine Überprüfung der Durchführung, wenn Sie eine Seite laden, verwenden Sie folgende:

Angular einen speziellen Komponente Lifecycle Haken haben diese Grenzfälle zu behandeln $canActivate genannt - zu überprüfen, ob es sollte versuchen, es zu aktivieren oder nicht. Sie können mit einem Authentifizierungs-/Autorisierungsdienst sprechen, um zu bestätigen, dass sie für den Status eines bestimmten Benutzers berechtigt sind, Ihre Komponente zu erreichen oder nicht.

Auf diese Weise wird Ihre Komponente intelligent genug sein, alle für die Aktivierung erforderlichen Prüfungen zu kapseln.

Sie können auch jeden Dienst wie $http oder Ihren benutzerdefinierten Dienst injizieren, um mit Ihrem Server zu sprechen. Im folgenden Codefragment ahne ich diesen Aufruf mit $timeout nach, der nur wahr zurückgibt, wenn Sie false zurückgeben, wird Ihre Komponente nicht aktiviert.

angular.module('app').component('someComponent', { 
    template: 'this is an inline component template', 
    $canActivate: function ($timeout) { 
     return $timeout(function(){ 
      return true; 
     }, 2000); 
    } 
}); 

einen anderen Haken $routerOnActivate namens Verwenden Sie die nächsten und vorherigen Routen zu lesen. Wenn Sie an den Parametern einer Route interessiert sind, verwenden Sie next.params, ein Objekt, das immer die Parameter enthält, die an diese Route übergeben wurden. z.B. next.params.id Dabei ist ID der Parameter, der an die angeforderte Route übergeben wurde.

Verwendung $canActivate mit Typoskript:

I've written a post regarding how to use write AngularJS components in Typoskript und haben einige Entwürfe Router Lifecycle Haken zu verwenden, die ich heute veröffentlichen werde. Bis dahin ist hier der Code einige Haken mit Typoskript unten zu verwenden:

class ReviewDetailsComponent implements ng.IComponentOptions { 
     templateUrl = 'app/components/review-details.component.html'; 

     // function member for this hook doesn't work!! 
     // so either use lambda expression or function directly. 
     $canActivate = $timeout => $timeout(() => true, 3000); 

     controllerAs = 'model'; 
     controller = ['$http', ReviewDetailsController]; 
    } 

angular.module('app').component('reviewDetails', new ReviewDetailsComponent()); 

Der obige Typoskript Code ist die gleiche wie JavaScript-Code-Snippet oben, dass $canActivate verwendet.

Leider hat es nicht funktioniert, wenn dies als Funktion Mitglied in Klasse wie $canActivate() definiert ist und das generierte Javascript ist dieses Mitglied mit Prototyp wie ReviewDetailsComponent.prototype.$canActivate definiert.

Aber es funktioniert gut, wenn mit Lambda-Ausdruck Syntax oder eine Funktion direkt geschrieben. Wenn Sie eine Klasse zum Definieren einer Komponente verwenden, sollten Sie in diesem Fall den Lambda-Ausdruck wählen.

Verwenden $routerOnActivate Typoskript mit

Die verknüpfte Controller in diesem Fall verwendet auch einen anderen Lebenszyklus Haken $routerOnActivate genannt und dies funktioniert gut, wenn als Funktionselement definiert:

interface IReviewDetailsController { 
    id: number; 
    $routerOnActivate(next, previous); 
} 

class ReviewDetailsController implements IReviewDetailsController { 

    id: number; 

    constructor(private $http: angular.IHttpService) { } 

    $routerOnActivate(next, previous) { 
     this.id = next.params.id; 

     // talk to cache or server to get item by id 
     // & show that on UI 
    } 
}