nicht NotAuthorized Seite umleitet - Angular 2

Question

Ich habe folgende app.routes.ts

import {ModuleWithProviders} from '@angular/core'; 
import {Routes, RouterModule} from '@angular/router'; 

import { HomeComponent } from '../app/components/home/home.component'; 
import { LoginComponent } from '../app/components/login/login.component'; 
import { LoggedInGuard } from '../app/logged-in.guard'; 
import { CategoriesComponent} from '../app/components/categories/categories.component'; 
import { LogoutComponent } from '../app/components/logout/logout.component'; 
import { RegisterComponent} from '../app/components/register/register.component'; 
import { NotAuthorizedComponent} from '../app/components/not-authorized/not-authorized.component'; 

const appRoutes: Routes = [ 
    {path: '', component: HomeComponent, pathMatch: 'full', canActivate: [LoggedInGuard]}, 
    {path: 'login', component: LoginComponent}, 
    {path: 'register', component: RegisterComponent}, 
    {path: 'notAuthorized', component: NotAuthorizedComponent}, 
    {path: 'categories', component: CategoriesComponent, canActivate: [LoggedInGuard]}, 
    {path: 'logout', component: LogoutComponent, canActivate: [LoggedInGuard]}, 
]; 

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); 

und dann habe ich ein categories.service.ts

import { Injectable } from '@angular/core'; 
import { Http, Headers, Response } from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 
import {Observable} from 'rxjs/Observable'; 
import {Categories} from '../Categories'; 
import {Router} from '@angular/router'; 

@Injectable() 
export class CategoriesService { 
    apiUrl: string; 
    categories: Categories[] = []; 

    constructor(private _http:Http, private router:Router) { 
    this.apiUrl = 'http://localhost:50424/api/'; 
    } 

    getCategories() { 
    let headers = new Headers(); 
    headers.append('Content-type', 'application/json'); 

    let authToken = localStorage.getItem('auth_token'); 
    headers.append('Authorization', `Bearer ${authToken}`); 

    return this._http.get(this.apiUrl+ 'Categories/Get', { headers: headers, withCredentials: true }) 
     .map(this.extractObject) 
     .catch(this.handleError); 
    } 

    private extractObject(res: Response): Categories { 
    let categories = res.json(); 
    return categories || { }; 
    } 

    private handleError (error: any) { 
    let errMsg = (error.message) ? error.message : 
     error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 
     if (error.status === 401 || error.status === 403) { 
     console.log('We have an unathorized request'); 
     //handle authorization errors 
     this.router.navigate(['notAuthorized']); 
     } 

    return Observable.throw(errMsg); 
    } 
} 

die im Grunde einige Kategorien wird immer von einer API. Alles funktioniert gut, aber ich möchte dies nur für autorisierte Benutzer begrenzen. Wenn ich also einen Serverfehler 401 oder 403 erstelle, möchte ich den Benutzer auf eine nicht autorisierte Seite umleiten. Mein Code wird auf die

richtig, aber es macht nicht die Umleitung, und auf der gleichen Seite bleiben. Was kann ich tun, um den Benutzer auf eine andere "Nicht autorisierte" Seite umzuleiten?

Vielen Dank für Ihre Hilfe und Zeit!

Answer 1

Wie in den Kommentaren diskutiert, ist das Problem ein Problem mit dem Geltungsbereich, da this.router nicht im Rahmen der übergebenen this.handleError bekannt ist. Daher muss die Signatur in private handleError(error: any, router: Router) geändert werden und der entsprechende Aufruf im Abonnement wird .catch(error => this.handleError(error, this.router))