navigationend - Redirigir a un componente diferente dentro de @CanActivate en Angular2

title angular 6

Question

¿Hay alguna forma en que podamos redirigir a un componente diferente de @CanActivate en Angular2?

Answer 1

¡Sí tu puedes! Hacer esto evitará que su componente cree una instancia para nada.

Primero, crea un nuevo archivo src/app-injector.ts

let appInjectorRef;

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

    appInjectorRef = injector;

    return appInjectorRef;
};

Luego, obtenga la referencia de bootstrap

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


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

Finalmente en tu función

// ...
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à!

Fue discutido aquí https://github.com/angular/angular/issues/4112

Puede encontrar un ejemplo completo aquí http://plnkr.co/edit/siMNH53PCuvUBRLk6suc?p=preview por @brandonroberts

Answer 2

Esto podría ayudar a alguien que está tratando de esperar algo antes de continuar.

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;
    }
  }
)
}

Answer 3

Solución final angular 2.0:

Su guardia puede ser simplemente un inyectable que, como tal, puede incluir sus propios inyectables. Entonces podemos simplemente inyectar el enrutador, para poder redirigirlo . No olvides agregar el servicio como proveedor en tu módulo de aplicación.

@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]}
];

Answer 4

A partir de hoy, con la última @ angular / enrutador 3.0.0-rc.1, aquí hay un par de referencias sobre cómo hacer eso a través de guardias CanActivate en las rutas:

1. referencia angular 2
2. Dos respuestas a esta pregunta AS , por Nilz11 y por Jason

La esencia principal de la lógica se ve así:

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