Angular2 Router - Wer weiß, wie zu verwenden canActivate in der app.ts also kann ich die redirect zur Startseite, wenn man nicht angemeldet

Angular2 Router - Wer weiß, wie zu verwenden canActivate in der app.ts also kann ich die redirect zur Startseite, wenn man nicht angemeldet

Ich bin mit Typoskript und eckig 2.

Aktuellen Versuch unter meine Konstruktor in meiner app.ts-Datei:

   canActivate(instruction) {           
               console.log("here - canActivate");
               console.log(instruction);

               this.router.navigate(['Home']);  
   }

Es derzeit nicht getroffen werden.
Irgendeine Idee warum?

Muss einen Titel Bearbeiten.

InformationsquelleAutor AngularM | 2016-01-12

  1. 12

    So, in der Dokumentation sieht, wie das ist, was es exportiert.

    export CanActivate(options : CanActivateAnnotation) : (hook: (next: ComponentInstruction, prev: ComponentInstruction) =>
                     Promise<boolean>| boolean) => ClassDecorator

@CanActivate((next, prev) => {
      //This must prove to be true for the component @ this route to load
      if(next.urlPath != '/Login'){ 
         return Promise.resolve(this._authService.getIsAuth() 
         && localStorage.getItem('authToken')
      }
      /*
       If CanActivate returns or resolves to false, the navigation is 
       cancelled. If CanActivate throws or rejects, the navigation is also
       cancelled. If CanActivate returns or resolves to true, navigation 
       continues, the component is instantiated, and the OnActivate hook of 
       that component is called if implemented.
      */
   }
);

    Unten in der Angular2 Dokumentation fügen Sie das snippet :
    exportiert aus angular2/router
    https://angular.io/docs/ts/latest/api/router/CanActivate-decorator.html

    Also, wenn Sie schauen, um zu tun, Umleitung von einer höheren Ebene.
    Sie würde nicht verwenden Sie die CanActivate decorator würden Sie tun, die folgenden.

    import {Directive, Attribute, ElementRef, DynamicComponentLoader} from 'angular2/core';
import {Router, RouterOutlet, ComponentInstruction} from 'angular2/router';
import {Login} from '../login/login';
import {UserService} from '../../Services/userService'; //a service to handle auth

@Directive({
  selector: 'router-outlet'
})
export class AuthRouterOutlet extends RouterOutlet {
  publicRoutes: any;
  private parentRouter: Router;

  constructor(private _userService:UserService, _elementRef: ElementRef, _loader: DynamicComponentLoader,
              _parentRouter: Router, @Attribute('name') nameAttr: string) {
    super(_elementRef, _loader, _parentRouter, nameAttr);

    this.parentRouter = _parentRouter;
    this.publicRoutes = {
      '/login': true,
      '/signup': true
    };
    //publicRoutes will be the routes auth is not needed for.
  }

  activate(instruction: ComponentInstruction) {
    var url = this.parentRouter.lastNavigationAttempt;
    if (!this.publicRoutes[url] && this._userService.getAuth()) {
      //todo: redirect to Login, may be there a better way?
      this.parentRouter.navigateByUrl('/login');
    }
    return super.activate(instruction);
    //we return super.activate(instruction) here so the router can activate the requested route and it's components.
  }
}

    Dieser Implementierung verarbeitet keine neue Anforderung an eine Richtlinie und führt die Funktion aktivieren, wo Ihre route authentifizierungslogik wird.
    Der obige code aufgerufen werden würde, so etwas wie AuthRouterOutlet.
    und Sie würden haben, um es zu Ihrer app.ts über die 

    directives: [ AuthRouterOutlet]
    Wo Importiere ich diese Anmerkung?
    Ich habe es auf meine Antwort, es ist in angular2/router
    Kann ich die @CanActivate zu meiner app.ts-Datei? Denn ich will redirect der Benutzer zu einer anderen route, wenn Sie nicht authentifiziert sind
    Ich denke, Sie müssen Sie auf die Komponenten, wo Sie wollen, zu Reiten, Ihre navigation.
    Ich will, dass es in einem globalen Bereich wie app-ts, so kann ich umleiten, wenn Benutzer versuchen zu erreichen-Seiten ohne Anmeldung

    InformationsquelleAutor inoabrian

  2. 5

    Mit der neuen beta-Version des Routers, Sie können auch sehen, meine Antwort hier, wie das CanActivate Schnittstelle:

    https://stackoverflow.com/a/38369948/1944351

    Mithilfe des decorator wie bereits in anderen Antworten ist auch in Ordnung.

    vielen Dank für diese.

    InformationsquelleAutor Nilz11

  3. 2

    Diese Antworten sind nicht mehr gültig, in der RC-Kandidat von 22/6/16.

    Gibt es eine Menge zu reden, eine neue Lösung für @CanActivate annotation, aber Sie können wieder die angular-2/router-deprecated version in der Zwischenzeit.

    Wenn Sie möchten, Folgen Sie den updates zu diesem Bereich wenn Sie wollen, verwenden Sie die neueren router Umsetzung bitte schauen Sie sich diese zwei github-Fragen:

    Sorry, es gibt keine vollständige Antwort jetzt, wenn ich sehe, jede weitere Fortschritte werde ich aktualisieren diese Antwort. Ich bin auf der Suche nach einer eleganten Lösung.

    Für den Zwischenbericht habe ich nur verwendet eine ngIf='fooObject' in einem div-check für das verwendete Objekt in einer untergeordneten Richtlinie aufgefüllt/truthy und dann machen die den rest der Komponenten html. Es ist nicht ideal, aber es funktioniert konsequent jetzt. Ihnen helfen kann oder nicht, je nach Ihrem Anwendungsfall. Ich brauche nicht umleiten, nur überprüfen Sie meine Daten hat, behoben für die Anzeige meiner Komponente.

    InformationsquelleAutor MJB

  4. 1

    Hier:

    https://angular.io/docs/ts/latest/api/router/CanActivate-decorator.html

    CanActivate ist eine Anmerkung, keine Funktion. Verwenden Sie es wie folgt:

    @Component({selector: ... })
@CanActivate(()=>console.log('Should the component Activate?'))
class AppComponent {

}

    routerOnActivate IST eine Funktion, die Sie verwenden in der Komponente:

    https://angular.io/docs/ts/latest/api/router/OnActivate-interface.html

    für die routerOnActivate wo Importiere ich es aus?
    Das eckige.io-Dokumentation ist schlecht für die Beispiele.
    @CanActivate(()=>Konsole.log('Sollten Sie die Komponente Aktivieren?')) code scheint nicht zu funktionieren
    aus angular.io/docs/ts/latest/api/router/OnActivate-interface.html, importieren Sie die OnActivate-Schnittstelle , aber es ist nicht notwendig, solange die Komponente, die Methode, die der router nennen Sie es, wenn Sie Ihre Methode aufgelöst wird und eine route
    Und ich kann diese in meiner app.ts-Datei?

    InformationsquelleAutor Langley

  5. 0

    @CanActivate entfernt wurde. Weitere details finden Sie hier.

    Soll nun route.canActivate

    InformationsquelleAutor Ori Calvo

Schreibe einen Kommentar