Przekierowanie do innego komponentu w środku @CanActivate w Angular2

Question

Czy istnieje sposób, w jaki możemy przekierować do innego komponentu z @CanActivate w Angular2?

Answer 1

Tak, możesz! Wykonanie tej czynności uniemożliwi Twojemu komponentowi tworzenie instancji za darmo.

Najpierw utworzyć nowy plik src/app-injector.ts

let appInjectorRef; 

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

    appInjectorRef = injector; 

    return appInjectorRef; 
}; 

Następnie uzyskać referencję bootstrap

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


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

Ostatecznie w swojej funkcji

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

To był omawiany tutaj https://github.com/angular/angular/issues/4112

można znaleźć pełny przykład tutaj http://plnkr.co/edit/siMNH53PCuvUBRLk6suc?p=preview przez @brandonroberts

Answer 2

Na dzień dzisiejszy, z najnowszej @ kątowe/routera 3.0.0-rc.1, oto kilka referencji, w jaki sposób to zrobić poprzez CanActivate strażników na trasach:

1. angular 2 reference
2. dwie odpowiedzi na to pytanie SO, przez Nilz11 i Jason

Główny sens logiki wygląda następująco:

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

Answer 3

Kątowymi 2,0 ostatecznego rozwiązania:

baczności mogą łatwo być tylko do wstrzyknięć, która jako taka może zawierają własne środki do wstrzykiwania. Możemy więc po prostu wprowadzić router, aby przekierować. Nie zapomnij dodać usługi jako dostawcy do modułu aplikacji.

@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

To może pomóc komuś, kto próbuje coś poczekać, zanim przejdzie dalej.

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