web-dev-qa-db-fra.com

Rediriger vers un autre composant dans @CanActivate dans Angular2

Est-il possible de rediriger vers un composant différent de @CanActivate dans Angular2?

angularangular2-routing
29
Vinz and Tonz

Oui, vous pouvez! Cela empêchera votre composant de s’instancier pour rien.

Commencez par créer un nouveau fichier src/app-injector.ts

let appInjectorRef;

export const appInjector:any = (injector = false) => {
    if (!injector) {
        return appInjectorRef;
    }

    appInjectorRef = injector;

    return appInjectorRef;
};

Ensuite, obtenez la référence de bootstrap

// ...
import {appInjector} from './app-injector';
// ...


bootstrap(App, [
  ROUTER_PROVIDERS
]).then((appRef) => appInjector(appRef.injector));

Enfin dans votre fonction 

// ...
import {appInjector} from './app-injector';
// ...

@CanActivate((next, prev) => {
  let injector = appInjector();
  let router = injector.get(Router);

  if (42 != 4 + 2) {
    router.navigate(['You', 'Shall', 'Not', 'Pass']);
    return false;
  }

  return true;
})

Et voilà ! 

Il a été discuté ici https://github.com/angular/angular/issues/4112

Vous trouverez un exemple complet ici http://plnkr.co/edit/siMNH53PCuvUBRLk6suc?p=preview by @brandonroberts

12
Druxtan

À compter d’aujourd’hui, avec @ angular/router 3.0.0-rc.1, voici quelques références sur la façon de procéder grâce à des gardes CanActivate sur des routes:

  1. référence angulaire 2
  2. Deux réponses à cette SO question, par Nilz11 et par Jason

L'essentiel de la logique se présente comme suit:

// ...
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
  if (this.authService.isLoggedIn) {
    // all ok, proceed navigation to routed component
    return true;
  }
  else {
    // start a new navigation to redirect to login page
    this.router.navigate(['/login']);
    // abort current navigation
    return false;
  }
}
52
superjos

Angular 2.0 solution finale:

Votre garde peut facilement être simplement un produit injectable qui, en tant que tel, peut inclure ses propres produits Nous pouvons donc simplement injecter le routeur, afin de rediriger . N'oubliez pas d'ajouter le service en tant que fournisseur dans votre module d'application.

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private router: Router, private authService: AuthService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
    if (!authService.isAuthenticated()) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

export const ROUTES: Routes = [
  {path: 'login', component: LoginComponent},
  {path: 'protected', loadChildren: 'DashboardComponent', canActivate: [AuthGuard]}
];
13
Stephen Paul

Cela pourrait aider quelqu'un qui essaie d'attendre quelque chose avant de continuer. 

waitForBonusToLoad(): Observable<[boolean, string]> {

const userClassBonusLoaded$ = this.store.select(fromRoot.getUserClasssBonusLoaded);
const userClassSelected$ = this.store.select(fromRoot.getClassAttendancesSelectedId);

return userClassBonusLoaded$.withLatestFrom(userClassSelected$)
  .do(([val, val2]) => {
    if (val === null && val2 !== null) {
      this.store.dispatch(new userClassBonus.LoadAction(val2));
    }
  })
  .filter(([val, val2]) => {
    if(val === null && val2 === null) return true;
    else return val;
  })
  .map(val => {
    return val;
  })
  .take(1);
}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
return this.waitForBonusToLoad().map(([val, val2]) =>
  {
    if(val === null && val2 === null){
      this.router.navigate(['/portal/user-bio']);
      return false;
    }
    else {
      return true;
    }
  }
)
}
2
Helzgate

Si vous utilisez un observable pour déterminer, vous pouvez utiliser tap operator de rxjs:

@Injectable({
  providedIn: SharedModule // or whatever is the equivalent in your app
})
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService,
              private router: Router) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.authService.isLoggedIn()
      .pipe(tap((isLoggedIn: boolean) => {
        if (!isLoggedIn) {
          this.router.navigate(['/']);
        }
      }));
  }

}
1
s.alem