HTTP错误处理程序中的Angular 2 router.navigate（）答案

【问题标题】：Angular 2 router.navigate() in HTTP error handlerHTTP错误处理程序中的Angular 2 router.navigate（）
【发布时间】：2017-01-12 22:10:14
【问题描述】：

如果服务器返回 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，谁能帮我解决这个问题。

提前致谢

【问题讨论】：

标签： angular angular2-routing

【解决方案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']);

【讨论】：

我现在不能尝试，但我认为这应该可以，谢谢。
@nusje2000 你试过了吗，它解决了你的问题吗？
是的，抱歉，我忘记了，但确实忘记了。

【解决方案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;
    }
  }

我知道这个问题之前已经回答过了，我只是把它放在这里，以防像我这样的其他人在这里结束:)

【讨论】：