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 Observable，並將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方法，和路由解決預期應該工作。