webentwicklung-frage-antwort-db.com.de

Angular2 Router - Jeder kann canActivate in app.ts verwenden, damit ich zur Startseite weiterleiten kann, wenn ich nicht angemeldet bin

Angular2 Router - Jeder kann canActivate in app.ts verwenden, damit ich zur Startseite weiterleiten kann, wenn ich nicht angemeldet bin

Ich verwende TypeScript und eckig 2.

Aktueller Versuch unter meinem Konstruktor in meiner Datei app.ts:

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

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

Momentan wird es nicht getroffen .. Irgendeine Idee warum?

12
AngularM

Die Dokumentation sieht also so aus, als würde sie exportieren.

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.
      */
   }
);

Am Ende der Angular2-Dokumentation fügen sie dieses Snippet hinzu: Exportiert aus angle2/router https://angular.io/docs/ts/latest/api/router/CanActivate-decorator.html

Wenn Sie also nach einer Umleitung von einer höheren Ebene suchen ... Sie würden den CanActivate-Dekorator nicht verwenden, würden Sie Folgendes tun.

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.
  }
}

Diese Implementierung behandelt alle neuen Anforderungen an eine Direktive und führt die Aktivierungsfunktion aus, wobei Ihre Routenauthentifizierungslogik die folgende sein wird .. Der obige Code würde etwa AuthRouterOutlet..__ heißen und Sie müssten ihn Ihrer app.ts hinzufügen über die 

directives: [ AuthRouterOutlet]
12
inoabrian

Mit der neuen Betaversion des Routers können Sie auch meine Antwort zur Verwendung der CanActivate-Schnittstelle hier sehen:

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

Die Verwendung des Dekorators wie in der anderen Antwort erwähnt ist ebenfalls in Ordnung.

5
Nilz11

Diese Antworten sind im RC-Kandidaten ab dem 22.6.16 nicht mehr gültig.

Es wird viel über eine neue Lösung für @CanActivate Annotation gesprochen, aber Sie können in der Zwischenzeit wieder auf die angular-2/router-deprecated-Version zurückgreifen.

Wenn Sie die Aktualisierungen für diesen Bereich verfolgen möchten, wenn Sie die neuere Router-Implementierung verwenden möchten, lesen Sie bitte die folgenden Probleme mit Github:

Leider gibt es derzeit keine vollständige Antwort. Wenn ich weitere Fortschritte sehe, werde ich diese Antwort aktualisieren. Ich suche auch nach einer eleganten Lösung.

In der Zwischenzeit habe ich nur einen ngIf='fooObject' in einem div verwendet, um zu prüfen, ob das in einer untergeordneten Anweisung verwendete Objekt ausgefüllt/true ist und dann den Rest der Komponenten html darstellt. Es ist nicht ideal, aber es funktioniert jetzt konsequent. Kann Ihnen je nach Anwendungsfall helfen oder nicht. Ich muss nicht umleiten, nur überprüfen, ob meine Daten für die Anzeige meiner Komponente aufgelöst wurden.

2
MJB

Von hier:

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

CanActivate ist eine Anmerkung und keine Funktion. Du verwendest es so:

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

}

routerOnActivate IS eine Funktion, die Sie in Ihrer Komponente verwenden:

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

1
Langley

@CanActivate wurde entfernt. Weitere Details hier .

Sie sollten jetzt route.canActivate verwenden.

0
Ori Calvo