Angular2: Маршрут перенаправления с AuthGuard

Question

Я приложение Angular2, который должен блокировать маршрут к определенной странице, если пользователь не вошел в систему Это мой app.routes файл

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

и мой файл AuthGuard

.

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

теперь, если я стараюсь, чтобы перейти к http://localhost:4200/#/home пути и у меня уже есть маркер, хранящийся в LocalStorage, ничего не произойдет: домашняя страница не предъявляются и путь на панели навигации становится http://localhost:4200/#/. Что случилось?

Answer 1

canActive метод должен возвращать либо Observable<boolean>, Promise<boolean>, либо boolean.

Вы подписываетесь на this.services.keepAlive Наблюдаемое и возвращаете значение boolean для обратного вызова подписки, вместо того чтобы возвращать его методу canActivate. Измените код следующим образом:

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

Таким образом, Наблюдаемые из логического типа (Observable<boolean>) будет возвращен к методу canActive и пути решения должны работать, как ожидалось.