Angular 4.3 - Http 401 status - Router.Navigate(['/ login']不导航

时间:2017-09-22 21:05:04

标签: angular router

使用Angular 4.3。

我遇到了一个与401错误和router.Navigate相关的非常奇怪的问题。我正在处理catch中的异常并检查错误状态。如果状态为401,则导航到登录页面。在这种状态下router.navigate不起作用,它只在状态为401 [控制台没有错误]时才起作用。如果状态是404,则this.router.navigate(路由到未找到的组件)工作正常。这是我的代码 -

protected get(url: string, options?: RequestOptionsArgs): Observable<Response> {
    return this.http.get(url, options)      
                   .catch((response) => {

                      if (response.status === 401) {
                          console.log('401 error - navigating');
                          this.router.navigate(['/login']);  
                          return Observable.of(response);                                
                      }
                      return Observable.throw(response);
                   });

};

如果错误代码是404,那么router.Navigate可以正常工作。请参阅下面的代码[在此代码中router.navigate正常工作并导航到未发现的页面] -

protected get(url: string, options?: RequestOptionsArgs): Observable<Response> {
        return this.http.get(url, options)      
                       .catch((response) => {

                          if (response.status === 404) {
                              console.log('404 error - navigating');
                              this.router.navigate(['/notfoundpage']);  
                              return Observable.of(response);                                
                          }
                          return Observable.throw(response);
                       });
};

1 个答案:

答案 0 :(得分:1)

我认为更好的方式返回抛出的Observable。然后在组件中捕获它并从组件导航到所需的路由。

protected get(url: string, options?: RequestOptionsArgs): Observable<Response> {
    return this.http.get(url, options)      
                   .catch((response) => {

                      if (response.status === 401) {
                          console.log('401 error - navigating');
                          return Observable.throw('Unauthorized');                               
                      }
                      return Observable.throw(response);
                   });

和组件

ngOnInit(): void {
    this.yourService.yorMethod()
        .subscribe(resp => {
            your code
        }, (err) => {
            if (err === 'Unauthorized') { this.router.navigate(['/login']); 
        });
}