Angular 6-设置HTTP，登录服务，拦截器

Question

我正在尝试设置令牌登录服务，http服务和拦截器（用于设置标头），但是由于之前没有做过，所以我遇到了问题，与Angular 6相比，我相信没有什么不同5。

这是我用于登录服务的代码：

import {Injectable, Injector} from '@angular/core';
import {LoginModel, UserModel} from "../models/user.model";
import {Http, RequestOptions, Headers, Response} from '@angular/http';
import { Router } from '@angular/router';

import { map, filter, switchMap } from 'rxjs/operators';
import { environment } from '../../../environments/environment';

@Injectable()
export class LoginService {
    public token: string;
    private userLoginURL = environment.apiUrl + '/auth/epvlogin';

  constructor(private http: Http, private injector: Injector) {
      const token = JSON.parse(localStorage.getItem('Token'));
      this.token = token && token.token;
  }

    getToken(): string {
        return localStorage.getItem('Token');
    }

    setToken(token: string): void {
        localStorage.setItem('Token', token);
    }

    static getUser(): UserModel {
        const object = JSON.parse(sessionStorage.getItem('User'));
        return object.user;
    }

    handleError(error) {
        const router = this.injector.get(Router);
        if (error.rejection.status === 401 || error.rejection.status === 403) {
            router.navigate(['/sign-in']);
        }

        throw error;
    }

    isAuthenticated() {
        const promise = new Promise(
            (resolve, reject) => {
                resolve(this.getToken());
            }
        );
        return promise;
    }

    login(user: LoginModel) {

        return this.http.post(this.userLoginURL, user)
            .pipe(map((response: Response) => {
                const token = response.json() && response.json().token;
                if (token) {
                    this.token = token;

                    localStorage.setItem('Token', JSON.stringify({token: token}));
                    localStorage.setItem('User', JSON.stringify({user: response.json()}));
                    // sessionStorage.setItem('Token', JSON.stringify({token: token}));
                    // sessionStorage.setItem('User', JSON.stringify({user: response.json().user}));
                    return response;
                } else {
                    return false;
                }
            }));
    }

}

然后我有HTTP请求服务：

import {Injectable} from '@angular/core';
import {Observable} from "rxjs";
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/toPromise';
import {Router} from '@angular/router';
import {HttpClient, HttpErrorResponse, HttpHandler, HttpHeaders} from '@angular/common/http';
import 'rxjs/add/operator/catch';
import {catchError, map} from "rxjs/operators";

@Injectable()
export class HttpRequestService {


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

    handleError(error: any) {

        if (error.status && error.status === 401) {
            this.router.navigate(['/sign-in']);
            return;
        }

        let errMsg: any;
        errMsg = error.error.message ? error.error.message : error.toString();

        if (errMsg === 'User does not exist!') {
            this.router.navigate(['/sign-in']);
            return;
        }

        console.log(errMsg);
        return Observable.throw(errMsg);
    }

    get(url: string) {
        const result = this.http.get(url)
            .pipe(map((response: Response) => {

                return response;
            }),
                catchError((response) => this.handleError(response))
            );

        return result;
    }

    post(url: string, request: any) {
        const result = this.http.post(url, request)
            .pipe(map((response: Response) => {

                return response;
            }),
                catchError((response) => this.handleError(response))
            )
        return result;
    }

    delete(url: string) {
        const result = this.http.delete(url)
            .pipe(map((response: Response) => {
                if (response == null) {
                    return null;
                }

                return response;
            }),
                catchError((response) => this.handleError(response)))
        return result;
    }

    put(url: string, request: any) {
        const result = this.http.put(url, request)
            .pipe(map((response: Response) => {

                return response;
            }),
                catchError((response) => this.handleError(response)))
        return result;
    }

    postMultipart(url: string, data: any, files: File[]) {
        const formData: FormData = new FormData();
        formData.append('data', JSON.stringify(data));
        for (const file of files) {
            formData.append(file.name, file);
        }
        const result = this.http.post(url, formData)
            .pipe(map((response: Response) => {

                return response;
                // }
            }),
                catchError((response) => this.handleError(response))
            );
        return result;
    }
}

那时我遇到多个错误，不知道为什么。我将所有服务添加到应用程序模块中的提供程序。这些是我得到的错误：

Answer 1

RxJS 6有一些不同的对象。

例如Http现在是HttpClient

Catch现在为CatchError

您需要阅读RxJS 6迁移规范