Angular2: Route mit AuthGuard

Question

leitet ich habe eine Angular2 App, die Route zu einer bestimmten Seite blockieren soll, wenn der Benutzer nicht angemeldet ist Das ist mein app.routes

Datei

export const routes: Routes = [ 
    { path: '', component: LoginComponent }, 
    { path: 'login', component: LoginComponent }, 
    { path: 'home', component: HomeComponent, canActivate: [AuthGuard] }, 
    { path: '**', component: LoginComponent }, 
]; 

und meine AuthGuard Datei

.

@Injectable() 
export class AuthGuard implements CanActivate { 
response: ResponseInterface; 

constructor(private router: Router, private localStorage: LocalStorageService, 
private services: MyService) { } 
canActivate() { 

let token = String(this.localStorage.get('token')); 
if (token != null) { 
    this.services.keepAlive(token).subscribe(
    response => this.response = response, 
    error => alert(error), 
    () => { 
     if (this.response.status == 'OK') { 
     console.log("response OK"); 
     return true; 
     } else { 
     console.log("response KO"); 
     this.router.navigate(['/login']); 
     return false; 
     } 
    } 
) 

} else { 
    this.router.navigate(['/login']); 
    return false; 
} 

jetzt, wenn ich versuche zu http://localhost:4200/#/home Weg zu navigieren, und ich habe bereits ein Token in localstorage gespeichert ist, geschieht nichts: Homepage ist nicht gezeigt und mit dem Weg auf Navigationsleiste http://localhost:4200/#/ werden. Was ist los?

Answer 1

canActive Methode sollte entweder Observable<boolean>, Promise<boolean> oder boolean zurückgeben.

Sie abonnieren this.services.keepAlive Observable und geben den Wert boolean an den Rückruf zurück, anstatt ihn an die Methode canActivate zurückzugeben. Ändern Sie den Code wie folgt:

canActivate(): Observable<boolean> | Promise<boolean> | boolean { 
    let token = String(this.localStorage.get('token')); 
    if (token != null) { 
     return this.services.keepAlive(token) 
      .map(response => { 
       if (response.status == 'OK') { 
        console.log("response OK"); 
        return true; 
       } else { 
        console.log("response KO"); 
        this.router.navigate(['login']); 
        return false; 
       } 
      }); 
    } else { 
     this.router.navigate(['login']); 
     return false; 
    } 
} 

diese Weise die beobachtbaren einer boolean-Typ (Observable<boolean>) wird dem canActive Methode zurückgegeben werden, und Routen Lösung sollte wie erwartet funktionieren.