HTTP 錯誤處理程序中的 Angular 2 router.navigate()

Question

如果服務器返回 401 錯誤，我正在嘗試以 angular 制作一個導航到登錄頁面的系統，我試過這個，但它沒有導航：

import { Injectable }     from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable }     from 'rxjs/Observable';
import { Router } from '@angular/router';

import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

@Injectable()
export class AuthService {

  private heroesUrl = 'http://localhost:8000/auth/loggedIn';

  constructor (private http: Http, private router: Router) {}

  loggedIn (): Observable<string|number> {
    return this.http.get(this.heroesUrl)
      .map(res => { return res.json(); })
      .catch(this.handleError);
  }

  private handleError (error: Response|any) {
    if (error.status == 401) {
      this.router.navigate(['/path_to_login_page']);
      return error.status;
    }
  }
}

我已經檢查了來自服務器的響應，我還控制台記錄了 error.status == 401，它確實返回了 true，任何人都可以幫助我解決這個問題。

提前致謝

Answer 1

Angular 提供了兩個導航選項（ Router Class ）：

根據提供的命令數組和起點進行導航。 如果沒有提供起始路線，則導航是絕對的。 用法：

this.router.navigate(['team', 33, 'user', 11], {relativeTo: route});

根據提供的網址導航。 此導航始終是絕對的。 用法：

this.router.navigateByUrl('/team/33/user/11');

如果您嘗試使用第一個選項，請刪除命令之前的/ ：

this.router.navigate(['path_to_login_page']);

Answer 2

我必須做的是將this.router.navigate([])在setTimeout(() => ...)函數中。

所以這會像

private handleError (error: Response|any) {
    if (error.status == 401) {
      setTimeout(() => this.router.navigate(['/path_to_login_page']));
      return error.status;
    }
  }

---

我知道這個特定的問題之前已經回答過了，我只是把它放在這里，以防像我這樣的其他人最終在這里:)