web-dev-qa-db-fra.com

Angular2 Router - Tout le monde sait comment utiliser canActivate dans app.ts afin que je puisse rediriger vers la page d'accueil si je ne suis pas connecté

Angular2 Router - Tout le monde sait comment utiliser canActivate dans app.ts afin que je puisse rediriger vers la page d'accueil si je ne suis pas connecté

J'utilise TypeScript et angular 2.

Tentative actuelle sous mon constructeur dans mon fichier app.ts: 

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

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

Actuellement, il ne se fait pas frapper ... Toute idée pourquoi?

typescriptangularangular2-routing
12
AngularM

Ainsi, la documentation ressemble à ce qu'elle 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 documentation Angular2, ils ajoutent l'extrait suivant: Exporté depuis angular2/router https://angular.io/docs/ts/latest/api/router/CanActivate-decorator.html

Donc, si vous souhaitez effectuer une redirection à partir d'un niveau supérieur… .. Vous n'utiliseriez pas le décorateur CanActivate, vous procéderiez comme suit.

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 implémentation gère toute nouvelle demande à une directive et exécute la fonction activate où la logique d'authentification de votre route sera . Le code ci-dessus s'appelle quelque chose comme AuthRouterOutlet . Et vous devrez l'ajouter à vos applications. via le 

directives: [ AuthRouterOutlet]
12
inoabrian

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

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

Utiliser le décorateur comme mentionné dans une autre réponse convient également.

5
Nilz11

Ces réponses ne sont plus valables chez le candidat CR à compter du 22/06/16.

On parle beaucoup d’une nouvelle solution pour l’annotation @CanActivate mais vous pouvez revenir à l’utilisation de la version angular-2/router-deprecated dans l’intervalle.

Si vous souhaitez suivre les mises à jour de cette zone si vous souhaitez utiliser la nouvelle implémentation de routeur, veuillez vérifier ces deux problèmes de github:

Désolé, il n'y a pas de réponse complète pour le moment. Si je vois des progrès supplémentaires dans ce domaine, je mettrai à jour cette réponse. Je cherche aussi une solution élégante.

Entre-temps, je viens d'utiliser un ngIf='fooObject' dans une div pour vérifier que l'objet utilisé dans une directive enfant est rempli/véracité, puis je restitue le reste des composants html. Ce n'est pas idéal, mais cela fonctionne de manière constante en ce moment. Peut vous aider ou non en fonction de votre cas d'utilisation. Je n'ai pas besoin de rediriger, il suffit de vérifier que mes données ont été résolues pour l'affichage de mon composant.

2
MJB

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 IS une fonction que vous utilisez dans votre composant:

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

1
Langley

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

Vous devriez maintenant utiliser route.canActivate

0
Ori Calvo