Angular2 Router - Quelqu'un sait comment utiliser canActivate dans app.ts afin que je puisse rediriger vers la page d'accueil si non connecté

Angular2 Routeur - ce que quelqu'un sait comment utiliser canActivate dans l'app.ts afin que je puisse rediriger vers la page d'accueil si pas connecté

Je suis en utilisant le tapuscrit et angulaire 2.

Essai en cours en vertu de mon constructeur dans mon application.ts fichier:

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

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

Actuellement, elle ne marche pas se faire frapper.
Aucune idée pourquoi?

source d'informationauteur AngularM

  1. 12

    De sorte que la documentation ressemble c'est ce qu'il n'en exporte.

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

    Au bas de la Angular2 documentation ajouter cet extrait :
    exporté à partir de angular2/routeur
    https://angular.io/docs/ts/latest/api/router/CanActivate-decorator.html

    Donc, si vous cherchez à faire la redirection à partir d'un niveau plus élevé.
    Vous n'utilisez pas la CanActivate décorateur vous effectuez les opérations suivantes.

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

    Cette mise en œuvre poignées de toute nouvelle demande de directive et exécute la fonction activer où votre itinéraire logique d'authentification sera.
    Le code ci-dessus doit être appelé quelque chose comme AuthRouterOutlet.
    et vous devez l'ajouter à votre application.ts via le 

    directives: [ AuthRouterOutlet]
  2. 5

    Avec la nouvelle version bêta du routeur, vous pouvez également voir ma réponse ici sur la façon d'utiliser le CanActivate interface:

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

    À l'aide de la décoratrice comme mentionné dans d'autres réponse est bien aussi.

  3. 2

    Ces réponses ne sont plus valables dans le RC candidat de 22/6/16.

    Il y a beaucoup de parler d'une nouvelle solution pour @CanActivate annotation, mais vous pouvez revenir en arrière à l'aide de la angular-2/router-deprecated version dans l'intervalle.

    Si vous voulez suivre les mises à jour de cette zone si vous souhaitez utiliser le nouveau routeur de la mise en œuvre s'il vous plaît vérifier ces deux github questions:

    Désolé il n'y a pas de réponse complète à droite maintenant, si je vois plus progressé sur ce, je vais mettre à jour la présente réponse. Je suis à la recherche d'une solution élégante.

    Dans l'intervalle, j'ai juste utilisé un ngIf='fooObject' dans un div à vérifier pour l'objet en cours d'utilisation chez l'enfant, la directive est rempli/truthy et de rendre ensuite le reste des composants html. Ce n'est pas l'idéal, mais il ne fonctionne toujours maintenant. Peut vous aider ou pas, en fonction de votre cas d'utilisation. Je n'ai pas besoin de rediriger, seulement vérifier mes données ont des en résolu pour l'affichage de mon composant.

  4. 1

    À partir d'ici:

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

    CanActivate est une annotation, pas une fonction. Vous l'utilisez comme ceci:

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

}

    routerOnActivate EST une fonction que vous utilisez à l'intérieur de votre composante:

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

  5. 0

    @CanActivate a été supprimé. Voir plus de détails ici.

    Vous devez maintenant utiliser l'itinéraire.canActivate