Angloar2 маршрутизация внутри http-перехватчика

Я использую Angular 2.4.8. Связь с бэкэнд осуществляется через REST. В каждом запросе мне нужно отправить X-Auth-Token в заголовке. Токен хранится в сеансе. Когда токен устарел, сервер возвращает статус 401. В таком случае я хочу, чтобы приложение перешло на страницу входа.

Я добавил http-перехватчик в свой проект

@Injectable()
export class HttpInterceptor extends Http {

    constructor(backend: XHRBackend
        , defaultOptions: RequestOptions
        , private router: Router
    ) {
        super(backend, defaultOptions);
    }

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
        return super.request(url, options).catch((error: Response) => {
            if ((error.status === 401 || error.status === 403) && 
            (window.location.href.match(/\?/g) || []).length < 2) {
                // tslint:disable-next-line:no-console
                console.log('The authentication session expires.');
                window.sessionStorage.removeItem('auth-token');
                window.location.href = window.location.href + '/login';
                // this.router.navigate(['/login']);
                return Observable.empty();
            }
            return Observable.throw(error);
        });
    }
}

и он работает хорошо, кроме. Но я не использую маршрутизатор, но просто перенаправляет и перезагружает все приложения. Когда я изменил комментарий к

// window.location.href = window.location.href + '/login';
this.router.navigate(['/login']);

приложение не следует по ссылке. Как заставить маршрутизатор работать (перемещаться)?

изменить 2018-01-22

Мой app-routing.module.ts

const routes: Routes = [
    {
        path: 'login',
        component: LoginComponent,
        resolve: {
            boolean: InitResolverService
        }
    },
    {
        path: '**',
        redirectTo: 'system'
    }
];

@NgModule({
    imports: [
        RouterModule.forRoot(
            routes
            // , { enableTracing: true } // <-- debugging purposes only
        )
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule { }

где in InitResolverService У меня есть некоторая логика для первой навигации, а затем emit true и полный поток.

И LoginComponent

@Component({
    selector: 'app-login',
    templateUrl: 'login.component.html',
    styleUrls: ['login.component.less']
})
export class LoginComponent implements OnInit {
    private username: FormControl;
    private password: FormControl;
    public form: FormGroup;
    public displayDialog = false;
    isLoginButtonEnabled = true;
    isResetButtonVisible = false;

    constructor(
        private authService: AuthenticationService,
        private router: Router,
        private route: ActivatedRoute,
        private initService: InitResolverService
    ) {
        this.username = new FormControl(Validators.required);
        this.password = new FormControl(Validators.required);
        this.form = new FormGroup({
            Username: this.username,
            Password: this.password
        });
        this.form.setValue({
            Username: '',
            Password: ''
        });
        this.displayDialog = true;
    }

    ngOnInit() {
        this.initService.showSplash();
        this.authService.canActivate(this.route.snapshot, this.router.routerState.snapshot).subscribe(x => {
            if (x) {
                this.router.navigate(['/']);
            }
        });
    }
}

Ответ 1

мы решаем этот случай с записью собственного пользовательского http-сервиса, который мы используем весь http-запрос через REST.

Также вы можете с помощью настраиваемого http-сервиса;

центральный путь api
создать заголовок с токеном
обрабатывает весь HTTP-результат ошибки даже 401

Простой пример кода

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { ErrorObservable } from 'rxjs/observable/ErrorObservable';

export const API_PATH = "http://apipath"

@Injectable()
export class CustomHttpService {

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

    headerWithToken(): Headers {
        const headers = new Headers();
        headers.set('Authorization', 'bearer ' + localStorage.getItem('TOKEN'));
        headers.set('Content-Type', 'application/json');
        return headers;
    }

    get(params: URLSearchParams, method: string): Observable<any> {
        const url = `${API_PATH}/${method}`;
        return this.http.get(url, {params: params, headers: this.headerWithToken()})
        .map(
            res => <Array<any>>res.json()
        )
        .catch(err => {
            const result = this.handleErrors(err, this);
            return result;
        });
    }

    // put same way

    // post same way

    // delete same way

    public handleErrors(error: Response, obj: any): ErrorObservable {
        const errData = error.json();
        if (error.status === 401) {
            obj.router.navigate(['/login']);
        } else if (errData.message) {
            // give a message or something
        } else {
            console.log(errData);
        }
        return Observable.throw(error.json());
    }

}

Ответ 2

Я не использовал перехватчик для этого. с каждым вызовом API я использую .catch для обнаружения ошибок и перехода к этой функции:

  // define the error handler in a separate method so we can reuse it 
  //in other methods
  private handleError(error: HttpErrorResponse | any) {
    console.error('ApiService::handleError', error);
    if (error.status === 401) {
      this.oAuthService.logOut();
    }
   return Observable.throw(error);
  }

надеюсь, что это поможет.

Ответ 3

на вашем app.module.ts вы должны добавить:

{provide : Http, useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions, router: Router) => new HttpInterceptor(xhrBackend, requestOptions, router),deps: [XHRBackend, RequestOptions, Router]}

на вашем HttpInterceptor:

 constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private _router: Router) {
    super(backend, defaultOptions);
  }