Rediriger vers un autre composant à l'intérieur de @CanActivate dans Angular2
y a-t-il un moyen de rediriger vers un composant différent de @CanActivate dans Angular2 ?
5 réponses
Oui, vous le pouvez! Faire cela empêchera votre composant de s'instancier pour rien.
tout d'abord, 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, obtenir 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 pouvez trouver un exemple complet ici http://plnkr.co/edit/siMNH53PCuvUBRLk6suc?p=preview par @brandonroberts
à partir d'aujourd'hui, avec le dernier @angular/routeur 3.0.0-rc.1, Voici quelques références sur la façon de faire cela à travers CanActivate gardes sur les routes:
- angulaire 2 référence
- deux réponses à cette question, par Nilz11 et par Jason 151980920"
l'essentiel de la logique ressemble à:
// ...
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;
}
}
Angular 2.0 solution finale:
votre garde peut facilement être juste un injectable qui, en tant que tel, peut inclure ses propres injectables. Afin que nous puissions simplement injecter le routeur, afin de rediriger . N'oubliez pas d'ajouter le service en tant que fournisseur dans votre module app.
@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]}
];
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;
}
}
)
}
si vous utilisez un observable pour déterminer, vous pouvez levier tap opérateur 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(['/']);
}
}));
}
}